QT如何编写和使用自定义控件

       

        如果希望自己编写的QT自定义控件被重用，在Windows系统下，可以将控件封装成dll，之后只提供控件的头文件，lib和dll供使用者调用即可。

 

• 开发准备

       需要安装QT和VS，我使用的版本：QT 5.14.1 + VS 2017 Community
       注意使用此搭配的原因是，QT 5.14.1安装包中的Qt Creator 4.11.0 (Community)是用VS2017 32 bit编译的，可通过Qt Creator的About Qt Creator菜单查看。用其它VS版本编译的自定义控件无法在Qt Creator控件面板中显示。

 

• 安装QT

      QT的下载地址：http://download.qt.io/archive/qt/5.14/5.14.1/

       注意安装QT时记得勾选MSVC 2017，如下图

 

• 安装VS 2017

      下载地址：https://visualstudio.microsoft.com/zh-hans/vs/older-downloads/，安装VS 2017时记得安装C++相关组件即可。

 

• 创建自定义控件

 1. 启动Qt Creator，点击“新建文件或项目”，选择“Qt4 设计师自定义控件”，如下图

 

2.点Choose，进到下一步，在“名称”处填写工程名称，这里填入UDFCtrl，如下图

 

3.点下一步，选择编译调试工具，这里选MSVC 2017, 如下图：

 

4.点下一步，输入控件类的名称，这里输入HexEditor,如下图：

 

5.点“说明”，在“组”位置输入组名，这个名称会出现在Qt Creator的UI编辑器的控件列表中(见下图)，这里输入Editor,

 

6.点默认属性，会看到一串XML（如下图），这是用于将控件拖到界面上时，自动在ui文件中插入的一段代码，可以在这里设定控件拖到界面上时的初始大小的代码，这里不作修改。

 

7.点下一步，输入插件名称, 这里采用默认值，该名称也决定了最后成的dll及lib的名称（如下图）。
说明：只所以生成的dll称为插件，是因为在工程中会有一个派生自QDesignerCustomWidgetInterface的类HexEditorPlugin，该类实现了一系列接口函数，这一系列接口函数相当于Qt Creator与dll之间的协议，有了这个接口，Qt Creator就可以识别和使用插件了。

 

8.点下一步，再点完成，创建工程的步骤就完成了，生成的工程文件如下图：

 

9. 为了让控件类可通过dll导出给其它工程使用，即HexEditor类可供外部调用，这里要将HexEditor类添加导入导出标识，打开控件类的头文件HexEditor.h，先添加：
    #include <QtUiPlugin/QDesignerExportWidget>
    再为控件类HexEditor添加宏QDESIGNER_WIDGET_EXPORT，如下图：
    说明：宏QDESIGNER_WIDGET_EXPORT，最终就是在类前添加了dllexport 或dllexport，以用于导入和导出该类。

 

10. 分别生成Release版和Debug版的dll，Release版生成的dll、lib的名称为hexeditorplugin，Debug版生成的dll、lib为hexeditorplugind，文件名尾部会多一个d。

 

11.将Release版的 dll（本工程为hexeditorplugin.dll），复制到Qt Creator 的插件目录下，
   如：C:\Qt\Qt5.14.1\Tools\QtCreator\bin\plugins\designer。
   重要：这里一定要用Release版的dll，Debug版的dll在Qt Creator的控件列栏中不会显示

 

12.关闭Qt Creator, 注意复制dll到插件目录之后，一定要重开Qt Creator，不然控件也不会在Qt Creator中显示

 

• 创建使用自定义控件的工程

 生成自定义控件的dll之后，这里创建一个使用自定义控件的工程。

 

1. 打开Qt Creator，选Qt Widgets Application，新建一个工程，在Kits那一步选MSVC 2017, 其它用默认设定即可。

 

2. 进到ui编辑器，可见自定义控件HexEditor已经在左侧控件面板中显示出来了，如下图

 

3.将HexEditor控件拖到界面上，如上图所示，因HexEditor控件还没有编写界面代码，所以显示为空白

 

4.复制文件，将自定义控件工程中的hexeditor.h文件复制到本工程的include文件夹中，同时将Release 版和Debug版的lib文件hexeditorplugin.lib，hexeditorplugind.lib复制到lib文件夹中

 

5.添加库，在工程名处点右健，再点添加库，如下图

 

6.选择“外部库”，弹出界面如下，在“库文件”处点“浏览”，选择lib文件夹中的Release版的lib文件，即hexeditorplugin.lib。可见选择lib文件后，在“包含路径”中自动地识别到了头文件hexeditor.h所在文件夹的路径。

注意：一定要让“为debug版本添加'd'作为后缀”处于勾选状态，默认是勾上的，因为dll是Windows独有技术，所以这里取消Linux和Mac勾选

 

7.添加外部库之后，打开pro文件，可见在该文件中已添加了对lib库的引用，以及对头文件路径的依赖，如下图：

 

8.分别编译Release版和Debug版，然后将自定义控件生成的Release版和Debug版的dll分别复制到本程的exe生成目录中，分别在Release和Debug模式下点“运行”，如果此时程序能够正常运行，则说明可以正常使用自定义控件。

 

• 总结

1.VS的版本一定要与编译Qt Creator的版本一致，不然编译的控件不会被Qt Creator识别，比如我在Qt Creator 4.11.0中选择VS 2015 64 bit编译的控件，在Qt Creator的控件列表栏中无法显示。

2.一定要放Release版本的dll到Qt Creator的插件目录下，Debug版本的dll在Qt Creator的控件列表栏中也无法显示。

3.使用自定义控件时，当添加自定义控件的库时，一定要针对Debug版Release版本分别添加对应的库，不然在Debug中使用Release版的lib，dll时，编译时不会出错，但在运行时，会出现“QWidget: Must construct a QApplication before a QWidget” 的提示，并且程序无法成功运行。

本文例程代码