Qt自定义控件开发与使用,自定义控件实现容器与控件内布局

1.开发环境

Qt版本:Qt 4.8.7
编译器:MinGw
系统:Windows

2.创建Qt4自定义控件

创建一个Qt自定义控件工程。

这里写图片描述

工程名为Custom。

这里写图片描述

控件类取名Custom。

这里写图片描述

然后完成创建。

3.包含头文件与宏

此时编译出来Release版本的自定义控件放进Designer目录下仅能在Designer中拖动,在使用该控件的工程中编译将会报错,所以需要在该控件编译前在该控件类的头文件中包含指定的头文件与宏。

在custom.h中包含头文件QtDesigner/QDesignerExportWidget。

#include <QtDesigner/QDesignerExportWidget>

在class与类名Custom之间添加宏。

QDESIGNER_WIDGET_EXPORT

这里写图片描述

4.编写自定义控件

这里测试用的Custom为了与Qt控件在外观上区别开,加上一段qss就好。

这里写图片描述

当然Custom继承自QWidget类,为了使qss有效,会重写一下paintEvent事件函数。

void Custom::paintEvent(QPaintEvent *)
{
    QStyleOption styleOpt;
    styleOpt.init(this);
    QPainter painter(this);
    style()->drawPrimitive(QStyle::PE_Widget, &styleOpt, &painter, this);
}

5.编译

编写好自定义控件类后,就需要编译Release版本了。

编译好Release版本后,在目标目录中找到customplugin.dll和libcustomplugin.a(vs编译为.lib)并将其拷贝到Qt安装目录下的plugins\designer中。

这里写图片描述

6.Designer

打开Designer,就可以在“自定义窗口部件”一栏下看到刚才编写的自定义控件Custom。

这里写图片描述

拖动Custom到Designer的窗口中,就可以看到效果。

这里写图片描述

7.使用自定义控件

在Qt Creator中新建一个应用工程CustomWidget。

在CustomWidget工程目录下新建include和lib两个目录。

这里写图片描述

讲自定义控件Custom的头文件custom.h拷贝到include目录下,讲库libcustomplugin.a拷贝到lib目录下。

注意:此时因为使用的自定义控件是Release版本的,所以当前应用工程也编译Release版本,如果当前应用工程需要Run的是Debug版本,则链接的自定义控件类库也需要时Debug版本。

在CustomWidget.pro工程文件中包含头文件与库。

INCLUDEPATH += $$PWD/include
LIBS += $$PWD/lib/libcustomplugin.a

执行一次qmake,在生成的目标目录下,将customplugin.dll拷贝到程序运行目录下。

使用Designer编辑.ui文件。(是加载有自定义控件Custom的Qt Designer)

在Designer中使用自定义控件Custom。

这里写图片描述

编译应用工程CustomWidget成功后,然后运行就OK了。

这里写图片描述

8.Designer中实现容器与控件内布局

在Qt Designer中,QWidget以及QGroupBox等预定义控件都可以当做容器来存放其他控件并实现快速布局,但是在自定义控件继承了其基类后发现无法当做容器来存放其他控件并实现快速布局,这个时候就需要修改重写QDesignerCustomWidgetInterface类中的一个函数的实现。

找到Qt自定义控件中xxxplugin.h,其中有一个重写QDesignerCustomWidgetInterface类的函数isContainer,即是否为一个容器。

bool isContainer() const;

跳转到xxxplugin.cpp中isContainer函数的实现。

bool XXXPlugin::isContainer() const
{
    return false;
}

将返回值修改为true。

bool XXXPlugin::isContainer() const
{
    return true;
}

然后重新编译并在Qt Designer中使用,即可发现该自定义控件可以作为一个容器存放其他控件并实现控件内布局。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章