一、導讀

Qt是一個跨平臺的軟件開發工具，可以使用C++、Python、Qml語言開發項目。在實際項目開發過程中，其提供了一個界面描述文件（xxx.ui）用于描述界面中有哪些元素，我們也可以使用對應的設計工具Qt Designer手動進行界面設計和布局。

本文基于Qt Designer，描述其提供的原生界面元素，除此之外，還描述如何使用自定義控件擴展Qt Designer。

二、Qt Designer中提供的原生界面元素

使用Qt Designer在.ui文件中進行界面設計和布局時需要知道其包含哪些界面元素，如下圖所示：

一般情況下，使用上圖所示的界面元素就能完成軟件界面的設計了。

三、Qt Designer的擴展接口類

Qt提供了Qt Designer的擴展接口，這些接口以類的方式進行設計，命名為QDesignerxxx，如下圖所示：

為什么需要擴展Qt Designer呢？Qt Designer定位是一款設計軟件，在實際項目工程開發過程中，界面中的元素往往會重復出現，這時候，可以將這些重復出現且具有共性的界面元素封裝成自定義的擴展插件，并將其添加到Qt Designer中，這樣便可以在Qt Designer中直接用鼠標拖拽使用，進行信號和槽函數的編輯，加快了開發效率。

下面來看看Qt中提供的幾個Qt Designer擴展接口類的含義：

（1）QDesignerActionEditorInterface：該接口用于更改Qt Designer的動作編輯器。

（2）QDesignerContainerExtension：該接口用于在Qt Designer的工作空間中向自定義的多頁容器中添加頁面。

（3）QDesignerCustomWidgetCollectionInterface：該接口類用于在一個庫中包含多個自定義的小部件。

（4）QDesignerCustomWidgetInterface：該接口類用于允許Qt Designer訪問和構造自定義的小部件。

（5）QDesignerDynamicPropertySheetExtension：該類允許在Qt Designer的屬性編輯器中操作小部件的動態屬性。

（6）QDesignerFormEditorInterface：該類用于訪問Qt Designer的各種組件。

（7）QDesignerFormWindowInterface：該接口類用于查詢和操作出現在Qt Designer工作區中的窗體窗口。

（8）QDesignerFormWindowManagerInterface：該類用于在Qt Designer中操作窗體窗口的集合，并控制Qt Designer的窗體編輯操作。

（9）QDesignerMemberSheetExtension：該接口類用于操作小部件的成員函數，這些函數在使用Qt Designer的模式編輯信號和槽函數連接時顯示。

（10）QDesignerObjectInspectorInterface：該接口類用于更改Qt Designer的對象檢查器。

（11）QDesignerPropertyEditorInterface：該接口類用于查詢和操作Qt Designer的屬性編輯器的當前狀態。

（12）QDesignerPropertySheetExtension：該接口類用于操作小部件的屬性，這些屬性顯示在Qt Designer的屬性編輯器中。

（13）QDesignerTaskMenuExtension：該接口類用于向Qt Designer的任務菜單中添加自定義的菜單項。

（14）QDesignerWidgetBoxInterface：該接口類用于控制Qt Designer的小部件框的內容。

四、使用自定義插件擴展Qt Designer

要將自定義的小部件與QtDesigner集成，需要進行兩方面的處理：

（1）需要對自定義的小部件進行封裝描述，以便QtDesigner能夠識別。

（2）需要編寫一個合適的.pro，用于構建出合適的插件。

（4-1）創建接口描述

當開發好一個自定義的小部件后，則需要創建接口描述通知Qt Designer，才能將自定義的小部件作為插件添加到Qt Designer中。

在實際接口設計中，需創建QDesignerCustomWidgetInterface的子類，在子類中描述小部件各種公開的屬性，其中大部分是由基類中的純虛函數提供的，我們只需要重載這些純虛函數并返回相應的參數值即可。

QDesignerCustomWidgetInterface類中提供的純虛函數如下表所示：

（4-2）插件導出

為了讓插件能夠在所有的平臺上都能正常工作，需要確保它們能夠導出Qt Designer所需要的符號。插件類必須導出，這樣才可以讓Qt Designer加載，需要下述幾個步驟：

（1）使用Q_PLUGIN_METADATA()宏用于聲明插件的元數據。例如下列代碼：

Q_PLUGIN_METADATA(IID"org.qt-project.Qt.QDummyPlugin"FILE"mymetadata.json")

IID后面的字符串為插件的IID參數。FILE后面的字符串是可選的，指向一個json文件。

（2）使用QDESIGNER_WIDGET_EXPORT宏描述自定義的小部件類。例如：

classQDESIGNER_WIDGET_EXPORTMyPlugin:publicQWidget
{
Q_OBJECT

public:
explicitMyPlugin(QWidget*parent=nullptr);

protected:
voidpaintEvent(QPaintEvent*event)override;
};

注：QDESIGNER_WIDGET_EXPORT宏定義必須添加，否則集成到Qt Creator 中編譯會報錯。不加的話可以在設計器中加載，但是編譯會報錯。

（3） 使用Q_INTERFACES宏讓Qt元對象系統知道這個插件。Q_INTERFACES 讓qobject_cast()能正確進行QObject*到接口指針的轉換，就此我們可以判斷插件的合法性。

（4-3）構建小部件

在前面描述了將已有自定義控件封裝成QtDesigner中使用的插件的代碼編寫過程，本小節將描述如何構建小部件，這一點則聚焦于.pro中，插件在編譯構建后則會以庫文件的方式生成。

（1）在.pro工程配置文件中添加如下參數配置項：

QT+=widgetsdesigner
CONFIG+=plugin
TEMPLATE=lib

QT += widgets designer語句添加了兩個模塊：widgets和designer，CONFIG += plugin語句用于描述這個工程是以插件的方式編譯構建，TEMPLATE = lib語句用于描述工程以庫的方式構建。

（2）在.pro工程配置文件中添加如下參數配置項：

target.path=$$[QT_INSTALL_PLUGINS]/designer
INSTALLS+=target

變量$[QT_INSTALL_PLUGINS]是一個占位符，表示已安裝的Qt插件的位置。

上面語句的意思則是指定插件的安裝位置，當執行安裝操作后，會將生成的庫文件復制到對應的目錄下（如何執行安裝操作，后文會寫到）。

（4-4）安裝小部件

（4-4-1）手動安裝

如果插件工程能夠正常編譯構建通過，則會生成插件庫文件。這時候我們需要將其復制到Qt Designer下的插件庫目錄中。路徑為具體Qt構建版本目錄/plugins/designer/中。

注：使用對應的構建套件編譯構建出的插件庫只能安裝到對應構建套件目錄中的/plugins/designer/目錄下，這樣插件庫才能被對應的Qt Designer正常加載和使用。

總而言之，編譯、構建、安裝、QtDesigner版本需要一致。

（4-4-2）自動安裝

在（4-3）小節的.pro工程描述文件中，使用INSTALLS指定了庫文件的安裝目錄，還需要添加一個安裝操作：

1、點擊QtCreator左側菜單欄下的『項目』一欄，進入項目配置界面。

2、選擇『Build 的步驟』下的“添加Build步驟”，點擊“Custom Process Step”按鈕新建一個build步驟，在輸入框中輸入如下命令：

注：上述圖片操作本質是make install的寫法，由于是在Windows下，所以變成了mingw32-make。install參數表示在編譯構建完成后還需要執行安裝操作。

通過以上步驟，當在項目編譯構建后，則會將生成的插件庫文件自動復制到INSTALLS指定的目錄中。

（4-5）注意事項

如果小部件有特殊的行為，想要在Qt Designer中賦予這些行為，則需要在實際插件封裝代碼中提供initialize()函數的實現，以告訴Qt Designer特定行為配置的小部件的構造過程。

這個函數將在調用createWidget()之前首次被調用，并且在函數中可以設置一個內部標志，以便Qt Designer后續在調用插件的createWidget()函數時進行判斷測試。







審核編輯：劉清