首页 - 新闻 - Qt的自定义插件（用于Qt Designer）

Qt的自定义插件（用于Qt Designer）

2023-09-30 22:25

-->

之前的博客里有关于QWT的编译、配置和使用的文章，分别是在VS和Creator下进行的。

QWT编译、配置和使用（VS2010 + Qt5.1.0）。
QWT 编译、配置和使用（Qt Creator）。

介绍如何将QWT集成到Designer中。如果你仔细研究过的话，对于Designer中插件的使用应该不再陌生。下面介绍如何实现插件并应用到Designer中。

您还可以参考：为Qt Designer创建自定义小部件。

插件介绍：

Qt Designer 基于插件的架构允许用户定义和第三方自定义小部件，就像标准 Qt 控件一样进行编辑。所有自定义小部件功能均提供给 Qt Designer，包括小部件属性、信号和槽。由于 Qt Designer 在设计过程中使用真实组件，因此预览时自定义组件将与设计阶段相同。

好啦，我们先预览一下效果吧！

如图所示，Designer 包含自定义插件（Clock、Qled）和第三方插件（QWT）。好吧，我们先看一下效果。后面会有详细说明如何实现，慢慢来。。。

要为 Qt Designer 集成自定义小部件，您需要合适的小部件和适当的 .pro 文件。

提供接口说明

为了通知Qt Designer你想要提供widget的类型，你需要创建一个QDesignerCustomWidgetInterface的子类，它描述了组件暴露的各种属性，其中大部分是由基类中的纯虚函数提供的class，因为只有插件作者才能提供此信息。

数字	功能	返回值说明
1	名字()	提供插件的类名
2	组()	该控件所属组中的 Qt Designer 小部件框
3	工具提示()	帮助用户识别 Qt Designer 中的小部件的简要说明
4	这是什么（）	为 Qt Designer 用户设计的小部件的详细说明
5	includeFile()	使用此插件的应用程序中必须包含头文件。此信息存储在 UI 文件中，UIC 将使用它为包含自定义插件表单的代码创建适当的 #includes 语句。
6	图标()	Qt Designer插件框中小窗口的图标
7	isContainer()	true 表示该小部件将用于保存子小部件，否则为 false
8 9 10	createWidget() domXml() codeTemplate()	一个 QWidget 指针实例，指向从提供的父级构造的自定义小部件。注意：createWidget()是一个工厂方法，只负责创建widget。在 load() 返回之前，自定义小部件的属性将不可用。描述小部件的属性，例如对象名称、大小提示以及其他标准 QWidget 属性的描述。此函数保留供 Qt Designer 将来使用

另外两个虚函数也可以重新实现

数字	功能	返回值说明
11	初始化()	设置自定义小部件扩展等功能。自定义容器扩展（请参阅 QDesignerContainerExtension）和任务菜单扩展（请参阅 QDesignerTaskMenuExtension）应在此函数中设置。
12	已初始化()	如果widget已经初始化则返回true；否则返回 false。重新实现通常检查是否已调用initialize() 函数并返回此测试的结果。

domXml() 函数的注释：

domXml() 函数返回 UI 文件代码片段，使用 Qt Designer 窗口工厂创建自定义小部件并使用属性。

从Qt4.4开始，Qt Designer的widget允许一个完整的UI文件来描述自定义widget。 UI 文件可以使用标签加载。指定标签允许添加包含有关自定义小部件的附加信息的元素。如果不需要更多信息，那么标签就足够了。

如果自定义小部件没有提供合理的尺寸，则需要在子类的 domXml() 函数返回的字符串中指定默认位置尺寸（几何）。例如，自定义Widget插件示例提供的AnalogClockPlugin通过以下方式指定默认的Widget位置大小：

...
“\n”
“\n”
" 0\n"
" 0\n"
“ 100\n”
“ 100\n”
“\n”
“\n”
...

domXml() 函数的另一个特点是，如果它返回空字符串，则该小部件将不会安装在 Qt Designer 的小部件框中。但是，它仍然可以与其他形式的小部件一起使用。该属性用于隐藏不应由用户显式创建、但需要由其他小部件创建的小部件。

一个完整的自定义widget格式如下：

显示名称=“我的小部件”> 小部件::MyWidget
添加页面

标签的属性：

属性	演示形式	价值	内容
`语言`	选项	"c++", "占碑"	此属性指定自定义小部件提供的语言。主要防止C++插件出现在Qt Jambi中。
`显示名称`	选项	班级名称	属性的值将出现在小部件框中，可用于剥离命名空间。

该标签告诉 Qt Designer 和 UIC 应使用哪种方法将页面添加到容器组件。如果容器小部件需要调用特定方法来添加子项，而不是通过父项添加子项，则这适用。特别说明的是，这是一个相关容器，不是Qt Designer提供的子类容器，而是基于当前页面的概念。此外，您需要提供一个容器来扩展它们。

该元素可以包含有关属性的元信息列表。目前支持字符串类型的属性。对于这些属性，可以使用所描述的标签。该标签具有以下属性：

属性	演示形式	价值	内容
`姓名`	必填	房产名称
`类型`	必须	见下表	此属性的值决定属性编辑器将如何处理它们。
`notr`	选项	“真”， “假”	如果属性为“true”，则该值表示不再翻译。

字符串属性的type属性的值：

价值	类型
`“富文本”`	富文本
`“多行”`	多行纯文本
`“单线”`	单行纯文本
`“样式表”`	CSS 样式表
`“对象名称”`	对象名称（有限的有效字符集）
`“网址”`	URL、文件名。

插件要求

为了让插件在所有平台上正常工作，您需要确保它们导出 Qt Designer 所需的符号。

首先，Qt Designer 加载的插件必须按顺序导出插件类。使用 Q_PLUGIN_METADATA() 宏来执行此操作。此外，必须使用 QDESIGNER_WIDGET_EXPORT 宏来定义 Qt Designer 将实例化的插件中的每个自定义小部件类。

创建一个好的插件：

一些自定义小部件具有专门的用户界面功能，这使得它们的行为与 Qt Designer 中的其他标准小部件不同。特别是，如果自定义小部件通过调用 QWidget::grabKeyboard() 捕获键盘，Qt Designer 的操作将会受到影响。

为了让自定义的widget在Qt Designer中能够有特殊的行为，提供了initialize()函数来配置widget运行过程中的特定行为。该函数在第一次调用之前调用createWidget()。可以设置一个内部标志来测试何时调用 createWidget() 函数。

1.构建插件

为了简单起见，这里只提供了QLed的源代码。 customwidgetplugin的源代码可以在安装目录下的Demo中找到（示例：D:\Qt\Qt5.1.1\5.1.1\msvc2010\examples\designer\customwidgetplugin）。

www.gsm-guard.net

#CONFIG += 设计器插件 debug_and_release
#TARGET = $$qtLibraryTarget($$TARGET)
#TEMPLATE = lib
#QT += svg #QTDIR_build:DESTDIR = $$QT_BUILD_TREE/plugins/designer 配置+=插件
CONFIG += 设计师
CONFIG += debug_and_release
模板 = lib
QT += svg 小部件设计器标头 = qled.h \
qledplugin.h
来源 = qled.cpp \
qledplugin.cpp 资源 = qled.qrc target.path = $$[QT_INSTALL_PLUGINS]/designer
安装 += 目标源 #安装
#target.path = $$[QT_INSTALL_PLUGINS]/designer
#sources.files = $$SOURCES $$HEADERS *.pro
#sources.path = $$[QT_INSTALL_EXAMPLES]/designer/qledplugin
#安装 += 目标源

qled.h

#ifndef QLED_H
#定义QLED_H #包括<Qt>
#include <QWidget>
#include <QtDesigner/QDesignerExportWidget> QColor 类；
QSvgRenderer 类；类 QDESIGNER_WIDGET_EXPORT QLed ：公共 QWidget
{
Q_OBJECT
Q_ENUMS (ledColor)
Q_ENUMS（ledShape）
Q_PROPERTY(bool value READ value WRITE setValue);
Q_PROPERTY(ledColor onColor READ onColor WRITE setOnColor);
Q_PROPERTY(ledColor offColor READ offColor WRITE setOffColor);
Q_PROPERTY(ledShape 形状读取形状写入 setShape) 大众：
QLed(QWidget *parent = 0);
虚拟 ~QLed();
bool value() const { 返回 m_value; }
enum ledColor { 红=0,绿,黄,灰,橙,紫,蓝 };
enum ledShape { Circle=0,Square,Triangle,Rounded};
ledColor onColor() const { 返回 m_onColor; }
ledColor offColor() const { 返回 m_offColor; }
ledShape shape() const { 返回 m_shape; } 公共时段：
void setValue(bool);
void setOnColor(ledColor);
void setOffColor(ledColor);
void setShape(ledShape);
无效切换值（）；保护：
bool m_value;
ledColor m_onColor, m_offColor;
int id_Timer;
ledShape m_shape;
QStringList形状；
QStringList颜色；
void PaintEvent(QPaintEvent *event);
私人：
QSvgRenderer *渲染器;
}; ＃万一

qled.cpp

#包括
#包括
#包括
#包括
#包括
＃包括 #include“qled.h” QLed::QLed(QWidget *父级)
: QWidget(父)
{
m_value=false;
m_onColor=红色;
m_offColor=灰色;
m_shape=圆形;
形状 << ":/resources/circle_" << ":/resources/square_" << ":/resources/triang_" << ":/resources/round_";
颜色<<“红色.svg”<<“绿色.svg”<<“黄色.svg”<<“灰色.svg”<<“橙色.svg”<<“紫色.svg”<<“蓝色.svg” ; 渲染器 = new QSvgRenderer();
}
QLed::~QLed() {
删除渲染器；
} void QLed::paintEvent(QPaintEvent *)
{ QString ledShapeAndColor;
QPainter画家（本）；
Painter.setRenderHint(QPainter::Antialiasing, true);ledShapeAndColor=形状[m_shape]; if(m_value)
ledShapeAndColor.append(colors[m_onColor]);
否则
ledShapeAndColor.append(颜色[m_offColor]); 渲染器->加载(ledShapeAndColor);
渲染器->渲染(&painter); } void QLed::setOnColor(ledColor newColor)
{
m_onColor=newColor;
更新();
} void QLed::setOffColor(ledColor newColor)
{
m_offColor=newColor;
更新();
} void QLed::setShape(ledShape newShape)
{
m_shape=newShape;
更新();
} void QLed::setValue(布尔值)
{
m_value=值;
更新();
} void QLed::toggleValue()
{
m_value=!m_value;
更新();
}

qledplugin.h

#ifndef CUSTOMWIDGETPLUGIN_H
#定义 CUSTOMWIDGETPLUGIN_H #include <QDesignerCustomWidgetInterface>
类 QLedPlugin ：公共 QObject、公共 QDesignerCustomWidgetInterface
{
Q_OBJECT
Q_PLUGIN_METADATA(IID "org.qt-project.Qt.QDesignerCustomWidgetInterface" FILE "QLedPlugin.json")
Q_INTERFACES(QDesignerCustomWidgetInterface) 大众：
QLedPlugin(QObject *parent = 0); bool isContainer() const;
bool isInitialized() const;
QIcon icon() const;
QString domXml() const;
QString group() const;
QString includeFile() const;
QString name() const;
QString toolTip() const;
QString WhatsThis() const;
QWidget *createWidget(QWidget *parent);
无效初始化（QDesignerFormEditorInterface *核心）；私人：
bool 初始化；
}; #endif

qledplugin.cpp

#include“qled.h”
#include“qledplugin.h”
#include <QtPlugin> QLedPlugin::QLedPlugin(QObject *parent)
: QObject(父)
{
初始化= false;
} void QLedPlugin::initialize(QDesignerFormEditorInterface * )
{
if（已初始化）
返回; 初始化= true;
} bool QLedPlugin::isInitialized() const
{
返回初始化；
} QWidget *QLedPlugin::createWidget(QWidget *parent)
{
返回新的QLed（父级）；
} QString QLedPlugin::name() const
{
返回“QLed”;
} QString QLedPlugin::group() const
{
return "Led Widgets";
} QIcon QLedPlugin::icon() const
{
return QIcon(":resources/qled.png");
} QString QLedPlugin::toolTip() const
{
return tr("Qt Designer 的 LED 自定义小部件插件");
} QString QLedPlugin::whatsThis() const
{
return tr("Qt Designer 的 LED 自定义小部件插件");
} bool QLedPlugin::isContainer() const
{
返回 false;
} QString QLedPlugin::domXml() const
{
返回“\n”
“\n”
“\n”
" 0\n"
" 0\n"
“ 50\n”
“ 50\n”
“\n”
“\n”
“\n”
" 二进制 LED\n"
“\n”
“\n”
“假\n”
“\n”
“\n”
“ LED 小部件\n”
“\n”
“\n”
" QLed::红色\n"
“\n”
“\n”
" QLed::灰色\n"
“\n”
“\n”
" QLed::圆\n"
“\n”
"\n";
} QString QLedPlugin::includeFile() const
{
return "qled.h";
}

我相信到这里所有的东西都已经很清楚了，记得不要忘记QLedPlugin.json喔文件，当然最后也不能少资源文件：

经过编译，后会生成一个qledplugin.lib和qledplugin.dll，

2.配置插件

qt安装目录以D:\Qt\Qt5.1.1\5.1.1\msvc2010为例：

(1)将编译好的qledplugin.dll复制到D:\Qt\Qt5.1.1\5.1.1\msvc2010\bin目录下，

将 qledplugin.lib 复制到 D:\Qt\Qt5.1.1\5.1.1\msvc2010\lib

(2) 将 qledplugin.dll 复制到 D:\Qt\Qt5.1.1\5.1.1\msvc2010\plugins\designer 目录下。

(3) 将qled.h和qled.cpp放入空文件夹QLed中，然后将该文件夹复制到D:\Qt\Qt5.1.1\5.1.1\msvc2010\include目录中。

3。使用插件

创建一个新项目，然后进行配置。主要看.pro怎么写，如下：

QT += 核心 gui svg 大于(QT_MAJOR_VERSION, 4): QT += 小部件目标 = TestCustomWidgetPlugin
模板=应用程序 INCLUDEPATH += $$(QTDIR)/include/QCustomWidgetPlugin
INCLUDEPATH += $$(QTDIR)/include/QLed LIBS += $$(QTDIR)/lib/customwidgetplugin.lib \
$$(QTDIR)/lib/qledplugin.lib 源+= main.cpp\
小部件.cpp 标头 += widget.h 表格 += widget.ui

这样所有的任务就完成了，你可以轻松地在设计器中进行设计和预览了。

效果如下：

注：

技术在于沟通。转载时请注明出处，保持作品完整性。

Author: Yiqu丶二三里 Original text: http://www.gsm-guard.net/s/blog_a6fb6cc90102vsj1.html. -->