特製 Widget

特製 Widget

前言

  Qt 的預設元件雖然很夠用，但有時需要自己特製 Widget ，該如何特製呢?這次會示範特製一個 Widget 並自制繪圖的部分，在此把學習的過程做個紀錄。

內容

  先到 [ GitLab ] HelloQt 下載範例，這次應用的專案路徑
(HelloQt' directory)/Widget/Basic，在 Qt Creator 開啟設計介面會看到以下

範例的設計介面

圖中左側有這次會用的"Widget"在工具箱的位置。執行的結果如下

範例的執行結果

執行的結果會顯示一個黑色的方形，這正是範例特製的 Widget 。

  Qt 要特製 Widget  時事透過繼承"QWidget"這個類別來完成特製，所以要特製就要先新增一個繼承"QWidget"的類別，可以的話請透過精靈來加，步驟如下

新增檔案或專案

在工具列按下"新增檔案或專案"，接著如下

新增類別檔案

如圖順序操作即可，接著如下

新增類別精靈

首先要先對類別命名，第二步驟選擇"Base class"為"QWidget"，就著按下一步會問檔案受否需要版本控制，然後就新增完畢，範例已經新增"mywidget"這個類別，可以在檔案列表看到，如下

新增的類別檔案

只是新增類別只是可以在程式裡使用該類別，可以在設計介面拖拉出該 Widget 嗎?答案是可以的，在設計介面的工具箱拖拉一個Widget，拖好後在上面按下右鍵，如下

提升類別

按下"提升到..."，接著看到以下

選擇要提升的類別

範例以新增好"mywidget"在圖中上方，如果要新增一個新的可以在下方"提升的類別名稱"輸入類別的名稱後按下右側的新增，就可以在上方看到新的 Widget ，選擇好要提升的 Widget 後再按下下方的"提升"，就完成指名的特製 Widget，提升完後可以看到類別的名稱的改變，如下圖

提升後的類別名稱

  在新增完類別與在設計介面裡提升後，程式的部分要完成繪製一個黑色的方塊在 Widget 上，先看到 mywidget 的 header ，如下

#include <QWidget>

#include <QPainter>
class mywidget : public QWidget
{
  Q_OBJECT
public:
  explicit mywidget(QWidget *parent = nullptr);

protected:
  void paintEvent(QPaintEvent *event) override;
signals:

};

紅色的部分為手動新增的部分，由於要繪製，所以要覆寫 paintEvent() ，接著看實作的部分，如下

#include "mywidget.h"

mywidget::mywidget(QWidget *parent) : QWidget(parent)
{

}

void mywidget::paintEvent(QPaintEvent *event)
{
  QPainter painter( this );
  QPen pen( Qt::black );
  pen.setWidth( 4 );
  painter.setPen( pen );
  QRect rc( 4, 4, 112, 112 );
  painter.drawRect( rc );

}

紅色的部分為手動新增的部分，Qt  提供 QPainter 來處理繪圖的部分， QPen 則是筆刷，程式設寬度為"4"，藉著設定到 QPianter 就可以控制方塊的線寬，接著命令 QPainter 繪製方塊就完成繪製。

參考資料

[ doc.qt.io ] QWidget Class

相關文章與資料

[ GitLab ] HelloQt