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

一、導(dǎo)讀

Qt是一個(gè)跨平臺(tái)的軟件開(kāi)發(fā)工具，可以使用C++、Python、Qml語(yǔ)言開(kāi)發(fā)項(xiàng)目。在實(shí)際項(xiàng)目開(kāi)發(fā)過(guò)程中，其提供了一個(gè)界面描述文件（xxx.ui）用于描述界面中有哪些元素，我們也可以使用對(duì)應(yīng)的設(shè)計(jì)工具Qt Designer手動(dòng)進(jìn)行界面設(shè)計(jì)和布局。

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

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

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

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

三、Qt Designer的擴(kuò)展接口類(lèi)

Qt提供了Qt Designer的擴(kuò)展接口，這些接口以類(lèi)的方式進(jìn)行設(shè)計(jì)，命名為QDesignerxxx，如下圖所示：

為什么需要擴(kuò)展Qt Designer呢？Qt Designer定位是一款設(shè)計(jì)軟件，在實(shí)際項(xiàng)目工程開(kāi)發(fā)過(guò)程中，界面中的元素往往會(huì)重復(fù)出現(xiàn)，這時(shí)候，可以將這些重復(fù)出現(xiàn)且具有共性的界面元素封裝成自定義的擴(kuò)展插件，并將其添加到Qt Designer中，這樣便可以在Qt Designer中直接用鼠標(biāo)拖拽使用，進(jìn)行信號(hào)和槽函數(shù)的編輯，加快了開(kāi)發(fā)效率。

下面來(lái)看看Qt中提供的幾個(gè)Qt Designer擴(kuò)展接口類(lèi)的含義：

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

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

（3）QDesignerCustomWidgetCollectionInterface：該接口類(lèi)用于在一個(gè)庫(kù)中包含多個(gè)自定義的小部件。

（4）QDesignerCustomWidgetInterface：該接口類(lèi)用于允許Qt Designer訪問(wèn)和構(gòu)造自定義的小部件。

（5）QDesignerDynamicPropertySheetExtension：該類(lèi)允許在Qt Designer的屬性編輯器中操作小部件的動(dòng)態(tài)屬性。

（6）QDesignerFormEditorInterface：該類(lèi)用于訪問(wèn)Qt Designer的各種組件。

（7）QDesignerFormWindowInterface：該接口類(lèi)用于查詢(xún)和操作出現(xiàn)在Qt Designer工作區(qū)中的窗體窗口。

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

（9）QDesignerMemberSheetExtension：該接口類(lèi)用于操作小部件的成員函數(shù)，這些函數(shù)在使用Qt Designer的模式編輯信號(hào)和槽函數(shù)連接時(shí)顯示。

（10）QDesignerObjectInspectorInterface：該接口類(lèi)用于更改Qt Designer的對(duì)象檢查器。

（11）QDesignerPropertyEditorInterface：該接口類(lèi)用于查詢(xún)和操作Qt Designer的屬性編輯器的當(dāng)前狀態(tài)。

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

（13）QDesignerTaskMenuExtension：該接口類(lèi)用于向Qt Designer的任務(wù)菜單中添加自定義的菜單項(xiàng)。

（14）QDesignerWidgetBoxInterface：該接口類(lèi)用于控制Qt Designer的小部件框的內(nèi)容。

四、使用自定義插件擴(kuò)展Qt Designer

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

（1）需要對(duì)自定義的小部件進(jìn)行封裝描述，以便QtDesigner能夠識(shí)別。

（2）需要編寫(xiě)一個(gè)合適的.pro，用于構(gòu)建出合適的插件。

（4-1）創(chuàng)建接口描述

當(dāng)開(kāi)發(fā)好一個(gè)自定義的小部件后，則需要?jiǎng)?chuàng)建接口描述通知Qt Designer，才能將自定義的小部件作為插件添加到Qt Designer中。

在實(shí)際接口設(shè)計(jì)中，需創(chuàng)建QDesignerCustomWidgetInterface的子類(lèi)，在子類(lèi)中描述小部件各種公開(kāi)的屬性，其中大部分是由基類(lèi)中的純虛函數(shù)提供的，我們只需要重載這些純虛函數(shù)并返回相應(yīng)的參數(shù)值即可。

QDesignerCustomWidgetInterface類(lèi)中提供的純虛函數(shù)如下表所示：

（4-2）插件導(dǎo)出

為了讓插件能夠在所有的平臺(tái)上都能正常工作，需要確保它們能夠?qū)С鯭t Designer所需要的符號(hào)。插件類(lèi)必須導(dǎo)出，這樣才可以讓Qt Designer加載，需要下述幾個(gè)步驟：

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

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

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

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

classQDESIGNER_WIDGET_EXPORTMyPlugin:publicQWidget
{
Q_OBJECT

public:
explicitMyPlugin(QWidget*parent=nullptr);

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

注：QDESIGNER_WIDGET_EXPORT宏定義必須添加，否則集成到Qt Creator 中編譯會(huì)報(bào)錯(cuò)。不加的話可以在設(shè)計(jì)器中加載，但是編譯會(huì)報(bào)錯(cuò)。

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

（4-3）構(gòu)建小部件

在前面描述了將已有自定義控件封裝成QtDesigner中使用的插件的代碼編寫(xiě)過(guò)程，本小節(jié)將描述如何構(gòu)建小部件，這一點(diǎn)則聚焦于.pro中，插件在編譯構(gòu)建后則會(huì)以庫(kù)文件的方式生成。

（1）在.pro工程配置文件中添加如下參數(shù)配置項(xiàng)：

QT+=widgetsdesigner
CONFIG+=plugin
TEMPLATE=lib

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

（2）在.pro工程配置文件中添加如下參數(shù)配置項(xiàng)：

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

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

上面語(yǔ)句的意思則是指定插件的安裝位置，當(dāng)執(zhí)行安裝操作后，會(huì)將生成的庫(kù)文件復(fù)制到對(duì)應(yīng)的目錄下（如何執(zhí)行安裝操作，后文會(huì)寫(xiě)到）。

（4-4）安裝小部件

（4-4-1）手動(dòng)安裝

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

注：使用對(duì)應(yīng)的構(gòu)建套件編譯構(gòu)建出的插件庫(kù)只能安裝到對(duì)應(yīng)構(gòu)建套件目錄中的/plugins/designer/目錄下，這樣插件庫(kù)才能被對(duì)應(yīng)的Qt Designer正常加載和使用。

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

（4-4-2）自動(dòng)安裝

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

1、點(diǎn)擊QtCreator左側(cè)菜單欄下的『項(xiàng)目』一欄，進(jìn)入項(xiàng)目配置界面。

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

注：上述圖片操作本質(zhì)是make install的寫(xiě)法，由于是在Windows下，所以變成了mingw32-make。install參數(shù)表示在編譯構(gòu)建完成后還需要執(zhí)行安裝操作。

通過(guò)以上步驟，當(dāng)在項(xiàng)目編譯構(gòu)建后，則會(huì)將生成的插件庫(kù)文件自動(dòng)復(fù)制到INSTALLS指定的目錄中。

（4-5）注意事項(xiàng)

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

這個(gè)函數(shù)將在調(diào)用createWidget()之前首次被調(diào)用，并且在函數(shù)中可以設(shè)置一個(gè)內(nèi)部標(biāo)志，以便Qt Designer后續(xù)在調(diào)用插件的createWidget()函數(shù)時(shí)進(jìn)行判斷測(cè)試。







審核編輯：劉清