Qt自定義控件的實現與使用

前言

Qt已經提供了很多的基礎控件供開發使用，而Qt原生的控件有時候並不能滿足我們的需求，特別是在工業的運用上，比如我們需要一個日期時間的選擇器，Qt雖然已經提供了原生的QDateTime控件，但這個原生控件並不能滿足我們的需求，又比如我們需要實現類似微信左側的消息列表，單純的原生QListWidget（QListView）並不能完整的滿足需求，這個時候我們就會尋找一種可以滿足我們需求的控件。而Qt提供了自定義控件的功能，我們可以通過QtCreator自定義自己的控件，以滿足業務的需求。下面我們看看如何使用QtCreator生成自定義控件。

自定義控件的創建

1. 首先，如下圖，我們創建一個Qt工程，工程選擇Qt4設計師自定義控件。然後根據嚮導進行工程文件目錄的選擇。

2. 下一步中會選擇自定義控件的類名稱，如下圖所示。

這兒有一點比較重要，需要注意：Qtdesigner設計師在拉控件的時候會默認使用控件名稱的首字母小寫作爲創建的該控件的對象名，比如我們拖動了一個QPushButton控件，則Qtdesigner默認生成的對象的名稱爲pushButton，可以看出，對象名是直接將控件的名稱首字母進行小寫而來。因此我們在輸入自定義控件名稱的時候一定要首字母大寫，否則在後續使用該自定義控件的時候會報錯。

右側的源文件tab下是該控件工程的源文件，圖標文件的選項可以選填，這個主要是後續生成自定義控件時控件的圖標，如果沒有，則是Qt默認的原始圖標，說明和默認屬性tab下也可以選填。

• 填寫完成後，創建的工程項目如下圖所示。
  
  這個時候會發現，沒有UI文件，而我們一般的控件都是可見的（也有不可見的），這樣就面臨着兩種選擇:
• 使用代碼手繪UI；
• 將沒有UI文件的工程修改爲有UI文件的工程.

比較懶，所以我選擇了第二種方式，畢竟Qt已經提供了直觀的UI處理工具，爲什麼不用呢？那麼怎樣將工程修改爲有UI文件的工程呢，有兩種方法。

• 直接刪掉pri工程下面的控件類，然後重新添加新的Qt界面設計師類就行，這種方式比較簡單粗暴，需要注意，新添加的類默認是在控件插件的工程下面即Pro文件下；
• 新增一個UI文件，屬於pri工程類，這個時候需要對該類進行修改，修改方式按照界面設計師類的方式修改就行，無非就是在頭文件中增加namespace Ui{ class ***;} 增加私有成員變量ui。

無論是通過上述的哪一種方法增加了UI文件，都需要在頭文件中包含頭文件 #include <QtUiPlugin/QDesignerExportWidget>，在Qt版本5.7.0以下，可能是沒有這個文件，需要包含#include <QtDesigner/QDesignerExportWidget>頭文件，該頭文件在5.7.0版本以上被棄用，在5.7.0版本中，打開QtDesigner/QDesignerExportWidget文件可以看到：

#if defined(__GNUC__)
#  warning Header <QtDesigner/QDesignerExportWidget> is deprecated. Please include <QtUiPlugin/QDesignerExportWidget> instead.
#elif defined(_MSC_VER)
#  pragma message ("Header <QtDesigner/QDesignerExportWidget> is deprecated. Please include <QtUiPlugin/QDesignerExportWidget> instead.")
#endif

此外，控件類名前必須添加宏：QDESIGNER_WIDGET_EXPORT 否則在後續使用該控件時編譯會報錯。如下圖所示。

如上，我們基本上就已經完成一個自定義控件的編寫，接下來我們需要進行對該控件工程進行編譯，編譯時選擇release版本，debug版本可以編譯通過，但在後續使用過程中發現在Qtdesigner中找不到，並且運行的時候會報錯。
如果我們選擇了新增一個UI文件的方式增加了UI，並且沒有修改UI文件對象類名的話，編譯時會報錯，這是因爲在只新增一個UI文件的時候，Qt默認了UI文件的名稱爲form.ui，其對象名爲form，但是我們的構造函數中在new ui時 ui(new Ui::***)，使用的是類名，報錯找不到構造函數，如下圖所示，此時我們只需要修改UI文件的對象名並重新qmake就行，因爲ui_***.h文件需要重新生成。

至此，我們一個自定義的控件就算是創建完成了，如下圖，將運行目錄下面生成的***plugin.dll和***plugin.lib文件拷貝到Qt安裝目錄下，Qt5.7.0\5.7\msvc2013_64\plugins\designer，然後重新打開Qtdesigner設計師，創建UI文件，就能夠在左側拉入我們自定義的控件。

自定義控件的配置

首先以Qt安裝目錄C:\Qt\Qt5.7.0\5.7\msvc2013_64\爲例說明下（一勞永逸的方法），

• 複製生成的***plugin.dll文件到該目錄下 bin/下；
• 複製生成的***plugin.lib文件到該目錄下 lib/下；
• 新建文件夾，將***.h文件放進並將該文件夾複製到該目錄下 include/下；
• 複製生成的***plugin.dll文件到該目錄下plugins/designer/下；

也可以新建工程的時候在每個新工程中添加，但是會比較麻煩。

自定義控件的使用

新建Qt項目，包含該自定義控件就能正常使用，如下圖所示。下面我們主要看下Pro文件的寫法。

新建工程，如下圖方式，包含自定義控件的頭文件已經靜態鏈接庫文件，如果沒有進行上面的配置步驟，將***plugin.dll文件拷貝到該工程的運行目錄下也是可以運行的，編譯工程，運行。

#-------------------------------------------------
#
# Project created by QtCreator 2020-04-11T17:22:55
#
#-------------------------------------------------

QT       += core gui

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

TARGET = untitled3
TEMPLATE = app

LIBS += $$(QTDIR)/lib/datetimeplugin.lib
INCLUDEPATH  += $$(QTDIR)/include

SOURCES += main.cpp\
        mainwindow.cpp

HEADERS  += mainwindow.h

FORMS    += mainwindow.ui

如上面，其中最主要的是下面這兩行，其中的路徑也可以自定義。

LIBS += $$(QTDIR)/lib/datetimeplugin.lib
INCLUDEPATH  += $$(QTDIR)/include

注意事項：

• 如果需要將該控件集成到Qtcreator中使用，則編譯的時候需要保持和QtCreator同樣的編譯版本，windows版本的QtCreator版本一般是MSVC的，就需要保證庫的編譯版本也是MSVC，並且版本號也是一樣的，我的Qt版本是MSVC_2013，編譯庫時使用的是MSVC_2012，因此將該控件庫文件拷貝進Qt5.7.0\Tools\QtCreator\bin\plugins\designer時在QtCreator中並不能找到自定義控件；
• 前面提到過，自定義控件的類名稱首字母一定要大寫，因爲會和默認生成的對象名稱重複，編譯時報錯；
• 類名稱前加的宏一定不能忘記；
• Qt版本不要弄錯，因爲Qt版本直接影響着頭文件的引入.；