Qt创建Qt Designer自定义控件及使用

创建自定义控件

1. 打开Qt Creator选择文件->新建文件或项目
   

2. 填写项目名称和路径，点击下一步
   

3. 选择编译套件,由于windows下Qt库使用的是MinGW编译器，而windows上的Qt Creator是使用Microsoft Visual Studio的编译器生成的，二者的build key不同，生成的插件只可在Qt Designer中显示，而无法集成到Qt Creator中去。要想在Qt Creator中使用自定义插件，有两种方法

   • 使用对应的Qt库，即重新安装MSVC版本的Qt库
   • 下载Qt Creator的源代码用MinGW编译器重新编译，得到一个MinGW版本的Qt Creator，编译方法可以参考使用MinGW编译Qt Creator。

这里我们选择MSVC版本编译套件。

4. 新类名称根据自己需求设置,图标文件可以设置控件在Qt Designer中的图标，其他保持默认，下一步
   $注：首字母要大写，不然会与示例对象的默认名称冲突，导致编译错误$
   

5. 默认，下一步
   

6. 完成
   

7. 其中mylabel.h和mylabel.cpp用于我们自定义控件，mylabelplugin.h和mylabelplugin.cpp用于Qt Designer识别自定义控件的名称、分组、头文件等信息
   

8. mylabelplugin.h介绍

#ifndef MYLABELPLUGIN_H
#define MYLABELPLUGIN_H

#include <QDesignerCustomWidgetInterface>

class MyLabelPlugin : public QObject, public QDesignerCustomWidgetInterface
{
    Q_OBJECT
    Q_INTERFACES(QDesignerCustomWidgetInterface)
#if QT_VERSION >= 0x050000
    Q_PLUGIN_METADATA(IID "org.qt-project.Qt.QDesignerCustomWidgetInterface")
#endif // QT_VERSION >= 0x050000

public:
    MyLabelPlugin(QObject *parent = 0);

    /*
     * 返回下一行的bool值的iscontainer成员函数通知Qt Designer自定义控件是否包含子控件。
     * 如果返回false，则自定义控件内不能使用其他子控件，
     * 如果返回ture，则自定义控件内能包含子控件。
     */
    bool isContainer() const;

    /*成员函数isInintialized可判断Qt Designer是否已经做好使用自定义控件的准备*/
    bool isInitialized() const;

    /*Icon函数指定要在Qt Desiger的控件列表中出现的图标，如果不指定，则使用Qt自带的图标，可以在创建工程的时候指定*/
    QIcon icon() const;

    /*
     * 如果将鼠标指针放在自定义控件的类名、自定义控件名、X坐标、Y坐标、控件大小、插件控件的控件列表上，
     * 则成员函数doXml会通过QString类型将要显示的工具提示信息返回给Qt Designer
     */
    QString domXml() const;

    /*函数group将包含自定义控件在内的控件箱组返回给Qt Designer，如果控件箱内没有指定的组，则创建一个新组。*/
    QString group() const;

    /*函数includeFile表示需包含自定义控件的头文件。*/
    QString includeFile() const;

    /*函数name将显示到控件列表上的自定义控件的名称返回给Qt Designer。*/
    QString name() const;

    /*如果将指针放在自定义控件上，函数toolTip会将信息返回给Qt Designer，以显示工具提示框*/
    QString toolTip() const;

    /*成员函数whatsThis用于返回对控件进行较长说明时的所需信息*/
    QString whatsThis() const;

    /*返回QWidget的函数createWidget可简化插件自定义控件的实现，并返回自定义控件的父类*/
    QWidget *createWidget(QWidget *parent);

    /*
     * Qt Designer初始化自定义控件时调用成员函数initialize,
     * 为了初始化自定义控件，该函数将private声明的m_initialized变量更改为true
     */
    void initialize(QDesignerFormEditorInterface *core);

private:
    bool m_initialized;
};

#endif

9. 修改mylabelplugin.cpp中includeFile，添加MyLabel/,具体路径可根据实际情况添加，自定义控件使用时会用到

QString MyLabelPlugin::includeFile() const
{
    return QLatin1String("MyLabel/mylabel.h");
}

10. 修改mylabel.h，添加**#include <QtUiPlugin/QDesignerExportWidget>(Qt5.7以下版本添加QtDesigner/QDesignerExportWidget**)，并在类名前添加宏QDESIGNER_WIDGET_EXPORT

#ifndef MYBUTTON_H
#define MYBUTTON_H

#include <QWidget>
#include <QtUiPlugin/QDesignerExportWidget>    //添加部分

class QDESIGNER_WIDGET_EXPORT MyButton : public QWidget    //修改部分
{
    Q_OBJECT

public:
    MyButton(QWidget *parent = 0);
};

#endif

11. 修改mylabel.cpp添加界面

#include "mylabel.h"
#include <QLabel>
#include <QHBoxLayout>

MyLabel::MyLabel(QWidget *parent) :
    QWidget(parent)
{
    QLabel *label = new QLabel("MyLabel");
    QHBoxLayout *mainLayout = new QHBoxLayout;
    mainLayout->addWidget(label);
    this->setLayout(mainLayout);
}

12. 切换至release版本，右键项目执行qmake，重新构建

自定义控件使用

1. 将release目录下的mylabelplugin.dll文件复制到以下目录
   • Qt安装目录下的msvc2015\plugins\designer下，我这里是F:\360data\Qt5.9.0\5.9\msvc2015\plugins\designer
   • Qt安装目录下的msvc2015\bin下，我这里是F:\360data\Qt5.9.0\5.9\msvc2015\bin
2. 将release目录下的mylabelplugin.lib文件复制到Qt安装目录下的msvc2015\lib下，我这里是F:\360data\Qt5.9.0\5.9\msvc2015\lib
3. 将mylabel.h复制到Qt安装目录下的msvc2015\include\MyLabel下，MyLabel为创建自定义控件中第9步修改的路径
4. 重新启动Qt Creator，新建项目，打开ui界面即可脱出自定义控件使用
   
5. 本以为已大功告成，结果编译时提示错误
   
6. 解决编译错误
   • 拷贝mylabel.h、mylabel.cpp、mylabel.pri到新建工程目录下，在新建工程pro文件中添加include(mylabel.pri)
   • 右键工程清除、执行qmake、重新构建就可以了