编写Qt Designer自定义控件(一)——如何创建并使用Qt自定义控件
http://blog.csdn.net/giselite/article/details/12622429
编写Qt Designer自定义控件(二)——编写自定义控件界面
http://blog.csdn.net/giselite/article/details/12622561
编写Qt Designer自定义控件(三)——给自定义控件添加属性
http://blog.csdn.net/giselite/article/details/12622625
编写Qt Designer自定义控件(四)——使用自定义控件
http://blog.csdn.net/giselite/article/details/12622659
编写Qt Designer自定义控件(一)——如何创建并使用Qt自定义控件
在使用Qt Designer设计窗体界面时,我们可以使用Widget Box里的窗体控件非常方便的绘制界面,比如拖进去一个按钮,一个文本编辑器等。虽然Qt Designer里的控件可以满足我们大部分的需求,但是有时候,也会产生一些特殊的需要,比如一个输入框,我们要输入的是经纬度,此时就会有两种输入方式,一种是小数形式,一种是度分秒的形式,此时只使用一个简单的LineEdit是无法满足需求的。我们设想构造这样一个输入控件,它可以支持浮点数输入,同时它还具有一个属性,更改这个属性可以使其切换为经纬度输入形式。如果我们的多个窗体上都需要输入经纬度,那么构造这样一个控件,将会非常方便。下面就以此为例,讲解一下如何创建自定义的窗体控件。
第一步:创建QtDesigner自定义控件工程
打开Qt Creator,创建一个Qt 设计师自定义控件,如下图所示:
根据向导提示,创建好工程,这里取名为LogLatEdit,工程目录如下图所示:
第二步:编译控件工程
为了淌通整个自定义控件的编写流程,我们先不做任何更改,切换为Release版本,直接编译一下。
第三步:部署插件
编译完成后,在输出目录下,将生成的dll文件和lib文件一起拷贝到Qt的插件目录下,以我使用的Qt 4.8.4为例,在Qt 4.8.4的安装目录D:\Qt\4.8.4下,找到plugins目录,在其中找到designer目录,然后把dll和lib放进去,完整路径为:D:\Qt\4.8.4\plugins\designer。之后,启动D:\Qt\4.8.4\bin下的designer.exe,创建一个窗体,此时就会发现在左侧的Widget Box里出现了我们自己的LogLatEdit控件,我们可以像使用其它控件一样,把我们自己的控件拖绘到窗体上,如下图所示:
如果自定义控件没有出现在Widgetbox里,那么此时你可以通过【帮助-关于插件】菜单,打开插件信息对话框,点击刷新按钮,只要你没有忘记把dll和lib文件拷贝到正确的位置,插件都会自动识别并加载。对于其它版本的Qt也一样,比如我自己的电脑里安装了好几个版本的Qt,对于其它版本的Qt,做法也是一样,只需要把插件工程生成的dll和lib文件放置到相应版本的插件目录下去即可。
到此,我们就理清了如何创建一个自定义控件,并且知道了如何部署、加载并使用自定义控件。下面我们开始编写我们需要的控件,对于只想了解自定义控件开发过程的读者,至此就已经知道如何做了,那么后面的内容您可以略过不读了。编写Qt Designer自定义控件(二)——编写自定义控件界面
接上文:编写Qt Designer自定义控件(一)——如何创建并使用Qt自定义控件
既然是控件,就应该有界面,默认生成的控件类只是一个继承了QWidget的类,如下:
我们需要的是如下的控件组合:
该控件在输入浮点型模式下,是上面那样,直接输入以度为单位的浮点数即可,如果经纬度信息不是以度为单位的,此时自己换算的话非常麻烦,因此可以切换为度分秒的输入模式,也就是下面哪种样子。为此,我们需要添加一个LineEidt,两个SpinBox和一个DoubleSpinBox以及一些Label控件。
为了简单起见,我不想自己手动去写这些界面相关的代码,为此我们可以先删掉默认生成的loglatedit.h和loglatedit.cpp文件,这样我们就可以重新使用LogLatEdit这个名称重新新建一个ui类了。右键工程,选择“添加新文件”,使用Qt下的“Qt设计师界面类”模板,创建一个ui类,如下图所示:
这个界面类,我们重新命名为我们需要的控件名称LogLatEdit,之后编辑ui文件,调整QWidget的大小,然后绘制控件,如图:
这里使用了HorizontalLayout控件对控件组合进行分组,为了演示方便,此处将二者拖放开来,最终的控件,实际上是两个水平布局叠加在一起,每次只有一个控件组合可见。
当然另一个做法也是可行的,那就是不要删除最初默认生成的loglatedit文件,而是把这个新建的ui类命名为别的名字,比如test,在绘制好控件之后,编译一下,然后找到Moc生成的ui_test.h文件,打开该文件,我们把相应的代码拷贝到我们的LogLatEdit控件类中去,然后做适当的修改,比如设定两个控件组合的位置及可见性,以及控件容器QWidget的大小等。这里为了把所有相关的代码都放在一起,便于读者测试,使用的就是这种方式。
使用ui类的方式比较方便,所有与界面相关的处理都可以在窗体设计器中完成,并且界面与代码分离,这种代码管理模式逻辑清晰,便于管理。不过使用ui类时,如果我们的ui类名称不是默认的LogLatEdit,则需要修改一下插件类中创建插件的代码,主要是修改loglateditplugin.cpp文件里createWidget方法中返回的控件对象。
经过修改之后我们的经纬度控件的代码如下:源文件:
至此,界面相关的事情就做完了,后面我们需要给这个控件添加两个属性,一个输入模式属性,更改这个属性时,我们的控件可以在两种输入模式下切换,另一个属性就是经纬度值,我们要使其可以设置和返回经纬度值。
未完,待续...
编写Qt Designer自定义控件(三)——给自定义控件添加属性
接上文:编写Qt Designer自定义控件(二)——编写自定义控件界面
窗体控件都有属性,比如QLineEdit就有text属性,另外还有设置属性,比如QLineEdit的readOnly属性。下面就讲解一下如何给自己的控件添加属性的问题。对于我们的经纬度输入控件,它应该具有一个设置属性和一个值属性,我们把设置属性命名为inputMode,把值属性命名为value,先来讲解设置属性inputMode。
对于inputMode属性,它应该是一个枚举值,分别对应控件的两种状态,即浮点输入模式和经纬度输入模式,因此这个类型应该定义为枚举型。另外对于Qt的控件类,如何声明属性,我们可以参考Qt的源代码,比如D:\Qt\4.8.4\src\gui\widgets目录下QMainWindow的定义,我们可以仿照其做法,实现输入模式属性,这里不多做解释,直接给出代码:
仿照QMainWindow的DockOptions属性和iconSize属性,我们实现我们的inputMode属性和value属性。这里注意一下使用Q_PROPERTY宏声明属性的方法,用法很简单,不多解释。下面是对应属性的实现代码:
未完,待续...
编写Qt Designer自定义控件(四)——使用自定义控件
接上文:编写Qt Designer自定义控件(三)——给自定义控件添加属性
控件编写完毕以后,把生成的dll和lib文件一起拷贝到Qt安装目录下的插件目录里,比如我安装在D盘里的Qt 4.8.4,路径为:D:\Qt\4.8.4\plugins\designer,拷贝进去以后,这个插件就可以被Qt Designer加载了,此时这个自定义控件就可以像普通的控件一样使用了。当然如有必要,还可以给这个控件添加一些信号和槽,另外按照经纬度的取值范围不同,做一下区分经度和维度的处理,本例中不需要这么复杂,就不再深入探索了,下面是使用自定义的经纬度输入控件的效果:
到目前为止,我们已经可以在Qt Designer中使用自定义的控件绘制界面了,但是这个时候,事情还没有完,因为使用QtCreator时,会发现其界面设计器中并没有我们的自定义控件。另外当我们用Qt Designer绘制完控件后,编译时会发生找不到“loglatedit.h”头文件的编译错误。这个问题很容易理解,首先我们可以想到的是Qt Creator和Qt Designer的自定义控件目录是不同的,我自己的机器里,Qt和Qt Creator的安装目录如下:
当我把自定义控件的dll和lib文件拷贝到D:\Qt\4.8.4\plugins\designer目录下,再启动D:\Qt\4.8.4\bin目录下的designer.exe,这个插件可以加载到Widget Box里面去,但是如果我启动D:\Qt\qtcreator-2.8.1\bin目录下的Qt Creator,我们的插件并不会出现在Qt Creator的设计器中。因此,对于Qt Creator,我们也需要执行以下控件的安装,那么具体要安装到哪里去呢?经过在Qt Creator安装目录下一番查找,发现D:\Qt\qtcreator-2.8.1\bin\plugins\designer这个目录下存在和D:\Qt\4.8.4\plugins\designer目录下同名的dll文件,于是我们猜测这个目录就是Qt Creator的控件安装目录,接下来拷贝loglateditplugin.dll到这个目录下,之后重新打开Qt Creator,发现自定义控件加载成功了,于是第一个问题解决了。
对于第二个问题,我们很容易想到使用一个动态库时,除了要有dll和lib文件外,还需要头文件,而对于某一版本的Qt SDK,其界面相关的头文件都放置在QtGui目录下,于是我将工程中经纬度输入控件的头文件loglatedit.h拷贝到D:\Qt\4.8.4\include\QtGui目录下,再次试验,发现编译可以通过,但是连接失败,尝试将相应的lib文件放到D:\Qt\4.7.4\lib目录下并且把该lib库添加为工程的依赖库,依然连接失败。这表明Qt的自定义控件工程并没有导出我们的自定义控件,因此其生成的库文件loglateditplugin.lib里并没有自定义控件的信息。因此要使用自定义控件,只能引入源码。
通过以上实验,总结一下具体的做法,列举如下:
1. 创建Qt 设计师自定义控件工程,编写自定义控件;
2. 拷贝release版的dll和lib文件到Qt Designer的插件目录下,如D:\Qt\4.8.4\plugins\designer,这样自定义控件即可在Qt Designer中使用;
3. 拷贝dll文件到Qt Creator的集成Qt Designer的插件目录下,如:D:\Qt\qtcreator-2.8.1\bin\plugins\designer,使集成于Qt Creator中的Qt Designer可以加载并使用该控件;
4. 拷贝自定义控件的头文件和源文件到使用自定义控件的工程中,并且添加到工程里面去,这样就可以正确编译并连接了;
参考: 关于QT自定义控件(Custom Widget)相关知识总结
另可以参考下如下文章,同时以后转载不要只保存网址,需要把整篇文章的内容都转过来才行。
http://qimo601.iteye.com/blog/1407257
改进法
- #ifndef HEXSPINBOX_H
- #define HEXSPINBOX_H
- #include <QSpinBox>
- class QRegExpValidator;
- class HexSpinBox : public QSpinBox
- {
- Q_OBJECT
- public:
- HexSpinBox(QWidget *parent = 0);
- protected:
- QValidator::State validate(QString &text, int &pos) const;
- int valueFromText(const QString &text) const;
- QString textFromValue(int value) const;
- private:
- QRegExpValidator *validator;
- };
- #endif
- #include <QtGui>
- #include "hexspinbox.h"
- HexSpinBox::HexSpinBox(QWidget *parent)
- : QSpinBox(parent)
- {
- setRange(0, 255);
- validator = new QRegExpValidator(QRegExp("[0-9A-Fa-f]{1,8}"), this);
- }
- QValidator::State HexSpinBox::validate(QString &text, int &pos) const
- {
- return validator->validate(text, pos);
- }
- int HexSpinBox::valueFromText(const QString &text) const
- {
- bool ok;
- return text.toInt(&ok, 16);
- }
- QString HexSpinBox::textFromValue(int value) const
- {
- return QString::number(value, 16).toUpper();
- }
- #include <QtGui/QTableWidget>
- #include <QtGui/QToolBar>
- #include <QtGui/QWidget>
- #include "hspinbox.h"
- QT_BEGIN_NAMESPACE
- class Ui_QMainClass
- {
- public:
- QWidget *centralWidget;
- QPushButton *pushButton;
- QTableWidget *tableWidget;
- QSpinBox *spinBox;
- HSpinBox *hspinBox;
插件法
custom.h
- #ifndef CUSTOM_H
- #define CUSTOM_H
- #include <QtGui/QWidget>
- #include "ui_test.h"
- class custom : public QWidget
- {
- Q_OBJECT
- public:
- custom(QWidget *parent = 0);
- ~custom();
- private:
- Ui::Form ui;
- };
- #endif // CUSTOM_H
custom.cpp
- #include "custom.h"
- custom::custom(QWidget *parent)
- : QWidget(parent)
- {
- ui.setupUi(this);
- }
- custom::~custom()
- {
- }
customplugin.h
- #ifndef CUSTOMPLUGIN_H
- #define CUSTOMPLUGIN_H
- #include <QDesignerCustomWidgetInterface>
- class customPlugin : public QObject, public QDesignerCustomWidgetInterface
- {
- Q_OBJECT
- Q_INTERFACES(QDesignerCustomWidgetInterface)
- public:
- customPlugin(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);
- void initialize(QDesignerFormEditorInterface *core);
- private:
- bool initialized;
- };
- #endif // CUSTOMPLUGIN_H
- #include "custom.h"
- #include <QtCore/QtPlugin>
- #include "customplugin.h"
- customPlugin::customPlugin(QObject *parent)
- : QObject(parent)
- {
- initialized = false;
- }
- void customPlugin::initialize(QDesignerFormEditorInterface */*core*/)
- {
- if (initialized)
- return;
- initialized = true;
- }
- bool customPlugin::isInitialized() const
- {
- return initialized;
- }
- QWidget *customPlugin::createWidget(QWidget *parent)
- {
- return new custom(parent);
- }
- QString customPlugin::name() const
- {
- return "custom";
- }
- QString customPlugin::group() const
- {
- return "My Plugins";
- }
- QIcon customPlugin::icon() const
- {
- return QIcon();
- }
- QString customPlugin::toolTip() const
- {
- return QString();
- }
- QString customPlugin::whatsThis() const
- {
- return QString();
- }
- bool customPlugin::isContainer() const
- {
- return false;
- }
- QString customPlugin::domXml() const
- {
- return "<widget class=\"custom\" name=\"custom\">\n"
- " <property name=\"geometry\">\n"
- " <rect>\n"
- " <x>0</x>\n"
- " <y>0</y>\n"
- " <width>100</width>\n"
- " <height>100</height>\n"
- " </rect>\n"
- " </property>\n"
- "</widget>\n";
- }
- QString customPlugin::includeFile() const
- {
- return "custom.h";
- }
- Q_EXPORT_PLUGIN2(custom, customPlugin)
- Q_EXPORT_PLUGIN2(customWidgetPlugin, CustomWidgetPlugin) // 第一个参数为插件的名字,第二个是插件类的名字(而不是自定义控件的类名)