Qt Quick 之 QML 与 C++ 混合编程具体解释

时间:2022-09-24 15:20:06

Qt Quick 技术的引入。使得你能够高速构建 UI ,具有动画、各种绚丽效果的 UI 都不在话下。但它不是万能的。也有非常多局限性,原来 Qt 的一些技术,比方低阶的网络编程如 QTcpSocket ,多线程,又如 XML 文档处理类库 QXmlStreamReader / QXmlStreamWriter 等等,在 QML 中要么不可用,要么用起来不方便,所以呢,非常多时候我们是会基于这样的原则来混合使用 QML 和 C++: QML 构建界面。 C++ 实现非界面的业务逻辑和复杂运算。

版权全部 foruok 。转载请注明出处:http://blog.csdn.net/foruok 。

那这篇呢,我们就来看看 QML 和 C++ 之间怎样交互。

事实上话说回来, QML 的非常多基本类型原本就是在 C++ 中实现的。比方 Item 相应 QQuickItem 。 Image 相应 QQuickImage , Text 相应 QQuickText  ,……这样看来。在 QML 中訪问 C++ 对象必定不成问题。

然也!

反过来,在 C++ 中事实上也能够使用 QML 对象。

对于这两种情景,我们分别讲述。

先看怎样在 QML 中使用 C++ 类和对象。

首先我们须要创建一个 Qt Quick App ,请參考《Qt Quick 之 Hello World 图文具体解释》建立一个名为 colorMaker 的项目。接下来我们的学习将会伴随 colorMaker 项目进行,等我们讲完。一个完整的 colorMaker 项目也会完毕。须要新建两个文件, colorMaker.h 和 colorMaker.cpp 。

colorMaker 仅仅是一个演示样例项目,我在 C++ 中实现一个 ColorMaker 类,它能够被注冊为一个 QML 类型供 QML 像内建类型一样使用。它的实例也能够导出为 QML 上下文属性在 QML 中訪问。我们的演示样例仅仅是在界面顶部显示当前时间(时间文字的颜色随时间变化而变化),在界面中间显示一个变色矩形。在界面底部放置几个按钮来控制颜色怎样变化。

图 1 是效果图:

Qt Quick 之 QML 与 C++ 混合编程具体解释

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZm9ydW9r/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

图 1 colorMaker 效果图

在 QML 中使用 C++ 类和对象

我们知道。 QML 事实上是对 JavaScript 的扩展。融合了 Qt Object 系统,它是一种新的解释型的语言。 QML 引擎尽管由 Qt C++ 实现,但 QML 对象的执行环境。说究竟和 C++ 对象的上下文环境是不同的,是平行的两个世界。假设你想在 QML 中訪问 C++ 对象。那么必定要找到一种途径来在两个执行环境之间建立沟通桥梁。

Qt 提供了两种在 QML 环境中使用 C++ 对象的方式:

  1. 在 C++ 中实现一个类。注冊到 QML 环境中, QML 环境中使用该类型创建对象
  2. 在 C++ 中构造一个对象。将这个对象设置为 QML 的上下文属性,在 QML 环境中直接使用改属性

无论哪种方式。对要导出的 C++ 类都有要求,不是一个类的全部方法、变量都能够被 QML 使用。因此我们先来看看怎样让一个方法或属性能够被 QML 使用。

实现能够导出的 C++ 类

前提条件

     要想将一个类或对象导出到 QML 中,下列前提条件必须满足:
  • 从 QObject 或 QObject 的派生类继承
  • 使用 Q_OBJECT 宏
    看起来好像和使用信号与槽的前提条件一样……没错,的确是一样的。这两个条件是为了让一个类能够进入 Qt 强大的元对象系统(meta-object system)中,仅仅有使用元对象系统,一个类的某些方法或属性才可能通过字符串形式的名字来调用。才具有了在 QML 中訪问的基础条件。
    一旦你导出了一个类。在 QML 中就必定要訪问该类的实例的属性或方法来达到某种目的。否则我真想不来你要干什么……而具有什么特征的属性或方法才干够被 QML 訪问呢?

信号,槽

    仅仅要是信号或者槽,都能够在 QML 中訪问。你能够把 C++ 对象的信号连接到 QML 中定义的方法上,也能够把 QML 对象的信号连接到 C++ 对象的槽上,还能够直接调用 C++ 对象的槽或信号……所以。这是最简单好用的一种途径。
    以下初始 ColorMaker 类的声明:
class ColorMaker : public QObject
{
Q_OBJECT public:
ColorMaker(QObject *parent = 0);
~ColorMaker(); signals:
void colorChanged(const QColor & color);
void currentTime(const QString &strTime); public slots:
void start();
void stop(); };

我们定义了 start() / stop() 两个槽, colorChanged() / currentTime() 两个信号,都能够在 QML 中使用。

Q_INVOKABLE 宏

    在定义一个类的成员函数时使用 Q_INVOKABLE 宏来修饰,就能够让该方法被元对象系统调用。这个宏必须放在返回类型前面。
    我给 ColorMaker 加入了两个使用 Q_INVOKABLE 宏修饰的方法。如今 ColorMaker 类的声明变成了这个样子:
class ColorMaker : public QObject
{
Q_OBJECT public:
ColorMaker(QObject *parent = 0);
~ColorMaker(); Q_INVOKABLE GenerateAlgorithm algorithm() const;
Q_INVOKABLE void setAlgorithm(GenerateAlgorithm algorithm); signals:
void colorChanged(const QColor & color);
void currentTime(const QString &strTime); public slots:
void start();
void stop();
};
    一旦你使用 Q_INVOKABLE 将某个方法注冊到元对象系统中,在 QML 中就能够用 ${Object}.${method} 来訪问。colorMaker 的 main.qml 中有使用 algorithm() 和 setAlgorithm() 的 QML 代码 :
    
    Component.onCompleted: {
colorMaker.color = Qt.rgba(0,180,120, 255);
colorMaker.setAlgorithm(ColorMaker.LinearIncrease);
changeAlgorithm(colorAlgorithm, colorMaker.algorithm());
}

    我在根元素创建完毕时初始化 colorMaker 对象。给它设定了颜色生成算法,同一时候改变界面上切换颜色生成算法的按钮的文字。

Q_ENUMS

    假设你要导出的类定义了想在 QML 中使用枚举类型,能够使用 Q_ENUMS 宏将该枚举注冊到元对象系统中。
    ColorMaker 类定义了 GenerateAlgorithm 枚举类型,支持 RandomRGB / RandomRed 等颜色生成算法。如今 ColorMaker 类的声明变成了这个样子:
class ColorMaker : public QObject
{
Q_OBJECT
Q_ENUMS(GenerateAlgorithm) public:
ColorMaker(QObject *parent = 0);
~ColorMaker(); enum GenerateAlgorithm{
RandomRGB,
RandomRed,
RandomGreen,
RandomBlue,
LinearIncrease
}; Q_INVOKABLE GenerateAlgorithm algorithm() const;
Q_INVOKABLE void setAlgorithm(GenerateAlgorithm algorithm); signals:
void colorChanged(const QColor & color);
void currentTime(const QString &strTime); public slots:
void start();
void stop();
};
    一旦你使用 Q_ENUMS 宏注冊了你的枚举类型。在 QML 中就能够用 ${CLASS_NAME}.${ENUM_VALUE} 的形式来訪问,比方 ColorMaker.LinearIncrease ,上节展示的 QML 代码片段已经使用了导出的枚举类型。

Q_PROPERTY

    Q_PROPERTY 宏用来定义可通过元对象系统訪问的属性,通过它定义的属性,能够在 QML 中訪问、改动。也能够在属性变化时发射特定的信号。

要想使用 Q_PROPERTY 宏,你的类必须是 QObject 的后裔,必须在类首使用 Q_OBJECT 宏。

    以下是 Q_PROPERTY 宏的原型:
Q_PROPERTY(type name
(READ getFunction [WRITE setFunction] |
MEMBER memberName [(READ getFunction | WRITE setFunction)])
[RESET resetFunction]
[NOTIFY notifySignal]
[REVISION int]
[DESIGNABLE bool]
[SCRIPTABLE bool]
[STORED bool]
[USER bool]
[CONSTANT]
[FINAL])

是不是非常复杂?你能够为一个属性命名,能够设定的选项数超过10个……我是认为有点儿头疼。

只是。不是全部的选项都必须设定,看一个最简短的属性声明:

Q_PROPERTY(int x READ x)

上面的声明定义了一个类型为 int 名为 x 的属性。通过方法 x() 来訪问。

    type name 这两个字段想必不用细说了吧? type 是属性的类型,能够是 int / float / QString / QObject / QColor / QFont 等等, name 就是属性的名字。
    事实上我们在实际使用中,非常少能够用全 Q_PROPERTY 的全部选项,就往 QML 导出类这样的场景来说,比較经常使用的是 READ / WRITE / NOTIFY 三个选项。我们来看看都是什么含义。
  • READ 标记。假设你没有为属性指定 MEMBER 标记。则 READ 标记不可缺少;声明一个读取属性的函数。该函数一般没有參数。返回定义的属性。
  • WRITE 标记,可选配置。声明一个设定属性的函数。

    它指定的函数,仅仅能有一个与属性类型匹配的參数,必须返回 void 。

  • NOTIFY 标记。可选配置。给属性关联一个信号(该信号必须是已经在类中声明过的),当属性的值发生变化时就会触发该信号。信号的參数。一般就是你定义的属性。
    其他标记的含义。请參考 Qt SDK 。
    QML 中的 Text 类型相应 C++ 中的 QQuickText 类,以下是我摘取的部分代码。能够看到 Q_ENUMS 和 Q_PROPERTY 的使用:
class QQuickText : public QQuickImplicitSizeItem
{
Q_OBJECT
Q_ENUMS(HAlignment) Q_PROPERTY(QString text READ text WRITE setText NOTIFY textChanged)
Q_PROPERTY(QFont font READ font WRITE setFont NOTIFY fontChanged)
Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged)
... public:
enum HAlignment { AlignLeft = Qt::AlignLeft,
AlignRight = Qt::AlignRight,
AlignHCenter = Qt::AlignHCenter,
AlignJustify = Qt::AlignJustify };
...
QString text() const;
void setText(const QString &); QFont font() const;
void setFont(const QFont &font); QColor color() const;
void setColor(const QColor &c);
...
};

如今给我们的 ColorMaker 类加入一些属性。以便 QML 能够获取、设置颜色值。新的 ColorMaker 类例如以下:

class ColorMaker : public QObject
{
Q_OBJECT
Q_ENUMS(GenerateAlgorithm)
Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged)
Q_PROPERTY(QColor timeColor READ timeColor) public:
ColorMaker(QObject *parent = 0);
~ColorMaker(); enum GenerateAlgorithm{
RandomRGB,
RandomRed,
RandomGreen,
RandomBlue,
LinearIncrease
}; QColor color() const;
void setColor(const QColor & color);
QColor timeColor() const; Q_INVOKABLE GenerateAlgorithm algorithm() const;
Q_INVOKABLE void setAlgorithm(GenerateAlgorithm algorithm); signals:
void colorChanged(const QColor & color);
void currentTime(const QString &strTime); public slots:
void start();
void stop(); protected:
void timerEvent(QTimerEvent *e); private:
GenerateAlgorithm m_algorithm;
QColor m_currentColor;
int m_nColorTimer;
};

如今我们的 ColorMaker 已经是一个完整的类了,有信号、有槽、有使用 Q_INVOKABLE 注冊的方法。还导出了枚举类型,小小麻雀五脏俱全。

    是时候看看它的实现了。翠花,上代码:
#include "colorMaker.h"
#include <QTimerEvent>
#include <QDateTime> ColorMaker::ColorMaker(QObject *parent)
: QObject(parent)
, m_algorithm(RandomRGB)
, m_currentColor(Qt::black)
, m_nColorTimer(0)
{
qsrand(QDateTime::currentDateTime().toTime_t());
} ColorMaker::~ColorMaker()
{
} QColor ColorMaker::color() const
{
return m_currentColor;
} void ColorMaker::setColor(const QColor &color)
{
m_currentColor = color;
emit colorChanged(m_currentColor);
} QColor ColorMaker::timeColor() const
{
QTime time = QTime::currentTime();
int r = time.hour();
int g = time.minute()*2;
int b = time.second()*4;
return QColor::fromRgb(r, g, b);
} ColorMaker::GenerateAlgorithm ColorMaker::algorithm() const
{
return m_algorithm;
} void ColorMaker::setAlgorithm(GenerateAlgorithm algorithm)
{
m_algorithm = algorithm;
} void ColorMaker::start()
{
if(m_nColorTimer == 0)
{
m_nColorTimer = startTimer(1000);
}
} void ColorMaker::stop()
{
if(m_nColorTimer > 0)
{
killTimer(m_nColorTimer);
m_nColorTimer = 0;
}
} void ColorMaker::timerEvent(QTimerEvent *e)
{
if(e->timerId() == m_nColorTimer)
{
switch(m_algorithm)
{
case RandomRGB:
m_currentColor.setRgb(qrand() % 255, qrand() % 255, qrand() % 255);
break;
case RandomRed:
m_currentColor.setRed(qrand() % 255);
break;
case RandomGreen:
m_currentColor.setGreen(qrand() % 255);
break;
case RandomBlue:
m_currentColor.setBlue(qrand() % 255);
break;
case LinearIncrease:
{
int r = m_currentColor.red() + 10;
int g = m_currentColor.green() + 10;
int b = m_currentColor.blue() + 10;
m_currentColor.setRgb(r % 255, g % 255, b % 255);
}
break;
}
emit colorChanged(m_currentColor);
emit currentTime(QDateTime::currentDateTime().toString("yyyy-MM-dd hh:mm:ss"));
}
else
{
QObject::timerEvent(e);
}
}

我使用一个周期为 1000 的定时器来产生颜色。定时器触发时依据算法来构造新的颜色值,发射 colorChanged 信号。同一时候也发送一个 currentTime 信号。

注冊一个 QML 中可用的类型

    看过了怎样实现一个可供 QML 訪问的类。这节我们看看怎样将一个 C++ 类型注冊为 QML 类型以及怎样在 QML 中使用这个类型。
    要达到这样的目的。大概能够分四步:
  1. 实现 C++ 类
  2. 注冊 QML 类型
  3. 在 QML 中导入类型
  4. 在 QML 创建由 C++ 导出的类型的实例并使用
    ColorMaker 已经就绪了。如今看看怎样将其注冊为 QML 能够使用的类型。

注冊 QML 类型

    要注冊一个 QML 类型。有多种方法可用,如 qmlRegisterSingletonType() 用来注冊一个单例类型。 qmlRegisterType() 注冊一个非单例的类型。 qmlRegisterTypeNotAvailable() 注冊一个类型用来占位, qmlRegisterUncreatableType() 通经常使用来注冊一个具有附加属性的附加类型,……好吧。我这里仅仅说常规的类型注冊,其他的,请您參考 Qt SDK 吧。
    qmlRegisterType() 是个模板函数,有两个原型:
template<typename T>
int qmlRegisterType(const char *uri, int versionMajor, int versionMinor, const char *qmlName); template<typename T, int metaObjectRevision>
int qmlRegisterType(const char *uri, int versionMajor, int versionMinor, const char *qmlName);

前一个原型一般用来注冊一个新类型。而后一个能够为特定的版本号注冊类型。后面这个牵涉到 Qt Quick 的类型和版本号机制,三言两语不能尽述,咱们单说前一个原型的使用。要使用 qmlRegisterType 须要包括 QtQml 头文件。

    先说模板參数 typename 。它就是你实现的 C++ 类的类名。
    qmlRegisterType() 的第一个參数 uri 。让你指定一个唯一的包名。相似 Java 中的那种,一是用来避免名字冲突,而是能够把多个相关类聚合到一个包中方便引用。比方我们常写这个语句 "import QtQuick.Controls 1.1" ,当中的 "QtQuick.Controls" 就是包名 uri ,而 1.1 则是版本号,是 versionMajor 和 versionMinor 的组合。 qmlName 则是 QML 中能够使用的类名。
    以下是 colorMaker 演示样例的 main.cpp 文件:
#include <QtGui/QGuiApplication>
#include "qtquick2applicationviewer.h"
#include <QtQml>
#include "colorMaker.h" int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
qmlRegisterType<ColorMaker>("an.qt.ColorMaker", 1, 0, "ColorMaker"); QtQuick2ApplicationViewer viewer;
viewer.setMainQmlFile(QStringLiteral("qml/colorMaker/main.qml"));
viewer.showExpanded(); return app.exec();
}
    上面的代码将 ColorMaker 类注冊为 QML 类 ColorMaker ,主版本号为 1 。次版本号为 0 。而我起的包名则是 an.qt.ColorMaker 。注冊动作一定要放在 QML 上下文创建之前,否则的话,木实用滴。

在 QML 中导入 C++ 注冊的类型

    一旦你在 C++ 中注冊好了 QML 类型,就能够在 QML 文档中引入你注冊的包。然后使用注冊的类型。要引入包,使用 import 语句。比方要使用我们注冊的 ColorMaker 类。能够在 QML 文档中加入以下的 import 语句:
import an.qt.ColorMaker 1.0

在 QML 中创建 C++ 导入类型的实例

    引入包后,你就能够在 QML 中创建 C++ 导入类型的对象了,与 QML 内建类型的使用全然一样。例如以下是创建一个 ColorMaker 实例的代码:
Rectangle {
width: 360;
height: 360; ColorMaker {
id: colorMaker;
color: Qt.green;
}
}
    如你所见。ColorMaker 的使用与 Retangle 没什么差别。假设你想在别处引用 ColorMaker 的实例,能够给实例指定一个唯一的 id ,就像上面的代码中那样。

完整的 colorMaker 实例

    怎样定义一个能够导出到 QML 中的 C++ 类、怎样注冊 QML 类型、怎样在 QML 中使用 C++ 导出的类型,都介绍完了,如今来看看完整的 colorMaker 。
    假设你对怎样在 QML 中使用信号与槽还有疑问。请温习下《Qt Quick 事件处理之信号与槽》再往下看。假设你对 QML 的基本的语法忘了。请温习《QML 语言基础》。

假设你不记得 Qt Quick 的基本元素,看《Qt Quick 简单教程》吧。

   C++ 代码前面都展示过了。这里看下完整的 main.qml 文档:
import QtQuick 2.0
import QtQuick.Controls 1.1
import an.qt.ColorMaker 1.0 Rectangle {
width: 360;
height: 360;
Text {
id: timeLabel;
anchors.left: parent.left;
anchors.leftMargin: 4;
anchors.top: parent.top;
anchors.topMargin: 4;
font.pixelSize: 26;
}
ColorMaker {
id: colorMaker;
color: Qt.green;
} Rectangle {
id: colorRect;
anchors.centerIn: parent;
width: 200;
height: 200;
color: "blue";
} Button {
id: start;
text: "start";
anchors.left: parent.left;
anchors.leftMargin: 4;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 4;
onClicked: {
colorMaker.start();
}
}
Button {
id: stop;
text: "stop";
anchors.left: start.right;
anchors.leftMargin: 4;
anchors.bottom: start.bottom;
onClicked: {
colorMaker.stop();
}
} function changeAlgorithm(button, algorithm){
switch(algorithm)
{
case 0:
button.text = "RandomRGB";
break;
case 1:
button.text = "RandomRed";
break;
case 2:
button.text = "RandomGreen";
break;
case 3:
button.text = "RandomBlue";
break;
case 4:
button.text = "LinearIncrease";
break;
}
} Button {
id: colorAlgorithm;
text: "RandomRGB";
anchors.left: stop.right;
anchors.leftMargin: 4;
anchors.bottom: start.bottom;
onClicked: {
var algorithm = (colorMaker.algorithm() + 1) % 5;
changeAlgorithm(colorAlgorithm, algorithm);
colorMaker.setAlgorithm(algorithm);
}
} Button {
id: quit;
text: "quit";
anchors.left: colorAlgorithm.right;
anchors.leftMargin: 4;
anchors.bottom: start.bottom;
onClicked: {
Qt.quit();
}
} Component.onCompleted: {
colorMaker.color = Qt.rgba(0,180,120, 255);
colorMaker.setAlgorithm(ColorMaker.LinearIncrease);
changeAlgorithm(colorAlgorithm, colorMaker.algorithm());
} Connections {
target: colorMaker;
onCurrentTime:{
timeLabel.text = strTime;
timeLabel.color = colorMaker.timeColor;
}
} Connections {
target: colorMaker;
onColorChanged:{
colorRect.color = color;
}
}
}

main.qml 的界面分成了三部分。參看图 1 。顶部是一个 Text ,用来显示由 ColorMaker 提供的时间,我使用 Connections 对象,指定 target 为 colorMaker ,在 onCurrentTime 信号处理器中改变 timeLabel 的文本和颜色。

这里使用 ColorMaker 的 timeColor 属性。该属性的读取函数是 timeColor 。回看一下 colorMaker.cpp 中的实现:

QColor ColorMaker::timeColor() const
{
QTime time = QTime::currentTime();
int r = time.hour();
int g = time.minute()*2;
int b = time.second()*4;
return QColor::fromRgb(r, g, b);
}

timeColor() 函数获取当前时间。取时、分、秒转换为 R 、 G 、 B 值,构造一个 QColor 对象。

    我构造了ColorMaker 类的一个实例。 id 为 colorMaker ,初始化颜色值为 green 。
    colorMaker 实例界面的中间是一个 Rectangle 对象,id 是 colorRect 。我使用 Connections 对象。指定 target 为 colorMaker ,在 onColorChanged 信号处理器中改变 colorRect 的颜色。
    界面的底部就是几个按钮,使用锚布局把它们排成一行。 start 按钮的 onClicked 信号处理器调用 colorMaker 的 start() 槽,启动颜色生成器。 stop 按钮的 onClicked 信号处理器调用 colorMaker 的 stop() 槽,停止颜色生成器。而 colorAlgorithm 按钮则每点击一次就切换一个颜色生成算法,同一时候调用 changeAlgorithm() 函数。依据算法改变按钮上的文字。 quit 按钮一点就退出应用。
    main.qml 还引入了一个新内容:定义函数。这个能够參考 JavaScript 的教程。

我们定义的 changeAlgorithm 函数,接受两个參数, button 和 algorithm 。假设你是 C++ 程序员。可能有点儿不适应:怎么參数就木有类型呢哈…… JavaScript 就是酱紫滴,拥有动态类型,一个变量在赋值时决定其类型。

    这就是 colorMaker 的全部了。
    
    好啦,如今再来看看怎样导出一个对象到 QML 中。

导出一个 C++ 对象为 QML 的属性

    上面看了怎样导出一个 QML 类型在 QML 文档中使用,你还能够把 C++ 中创建的对象作为属性传递到 QML 环境中,然后在 QML 环境中訪问。

我们还是以 colorMaker 为例。对其代码做适当改动来适应本节的内容。

注冊属性

    要将一个对象注冊为属性非常easy。colorMaker 的 main.cpp 改动后例如以下:
#include <QtGui/QGuiApplication>
#include "qtquick2applicationviewer.h"
#include <QtQml>
#include "colorMaker.h" int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv); QtQuick2ApplicationViewer viewer; viewer.rootContext()->setContextProperty("colorMaker", new ColorMaker); viewer.setMainQmlFile(QStringLiteral("qml/colorMaker/main.qml"));
viewer.showExpanded(); return app.exec();
}

注意我在 viewer 变量后添加的新语句:

viewer.rootContext()->setContextProperty("colorMaker", new ColorMaker);

正式这行代码从堆上分配了一个 ColorMaker 对象。然后注冊为 QML 上下文的属性,起了个名字就叫 colorMaker 。

    viewer.rootContext() 返回的是 QQmlContext 对象。 QQmlContext 类代表一个 QML 上下文,它的 setContextProperty() 方法能够为该上下文设置一个全局可见的属性。要注意的是。你 new 出来的对象。 QQmlContext 仅仅是使用,不会帮你删除,你须要自己找一个合适的时机来删除它。
    另一点要说明。由于我们去掉了 qmlRegisterType() 调用,所以在 main.qml 中不能再訪问 ColorMaker 类了,比方你不能通过类名来引用它定义的 GenerateAlgorithm 枚举类型, colorMaker.setAlgorithm(ColorMaker.LinearIncrease) 语句会导致以下的报错:
ReferenceError: ColorMaker is not defined
    如今来看怎样在 QML 中使用我们导出的属性

在 QML 中使用关联到 C++ 对象的属性

    一旦调用 setContextProperty() 导出了属性,就能够在 QML 中使用了,不须要 import 语句哦。以下是 main.qml 改动后的代码:
import QtQuick 2.0
import QtQuick.Controls 1.1
//[1]
//import an.qt.ColorMaker 1.0 Rectangle {
width: 360;
height: 360;
Text {
id: timeLabel;
anchors.left: parent.left;
anchors.leftMargin: 4;
anchors.top: parent.top;
anchors.topMargin: 4;
font.pixelSize: 26;
}
/* [2]
ColorMaker {
id: colorMaker;
color: Qt.green;
}
*/ Rectangle {
id: colorRect;
anchors.centerIn: parent;
width: 200;
height: 200;
color: "blue";
} Button {
id: start;
text: "start";
anchors.left: parent.left;
anchors.leftMargin: 4;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 4;
onClicked: {
colorMaker.start();
}
}
Button {
id: stop;
text: "stop";
anchors.left: start.right;
anchors.leftMargin: 4;
anchors.bottom: start.bottom;
onClicked: {
colorMaker.stop();
}
} function changeAlgorithm(button, algorithm){
switch(algorithm)
{
case 0:
button.text = "RandomRGB";
break;
case 1:
button.text = "RandomRed";
break;
case 2:
button.text = "RandomGreen";
break;
case 3:
button.text = "RandomBlue";
break;
case 4:
button.text = "LinearIncrease";
break;
}
} Button {
id: colorAlgorithm;
text: "RandomRGB";
anchors.left: stop.right;
anchors.leftMargin: 4;
anchors.bottom: start.bottom;
onClicked: {
var algorithm = (colorMaker.algorithm() + 1) % 5;
changeAlgorithm(colorAlgorithm, algorithm);
colorMaker.setAlgorithm(algorithm);
}
} Button {
id: quit;
text: "quit";
anchors.left: colorAlgorithm.right;
anchors.leftMargin: 4;
anchors.bottom: start.bottom;
onClicked: {
Qt.quit();
}
} Component.onCompleted: {
colorMaker.color = Qt.rgba(0,180,120, 255);
//[3]
//colorMaker.setAlgorithm(ColorMaker.LinearIncrease);
colorMaker.setAlgorithm(2);
changeAlgorithm(colorAlgorithm, colorMaker.algorithm());
} Connections {
target: colorMaker;
onCurrentTime:{
timeLabel.text = strTime;
timeLabel.color = colorMaker.timeColor;
}
} Connections {
target: colorMaker;
onColorChanged:{
colorRect.color = color;
}
}
}

main.qml 代码主要改动了三处。我已经使用方括号标注出来了。由于我将导出的属性命名为 colorMaker ,和导出 ColorMaker 类时构造的实例的 id 一样。所以改动少了些。

    你看到了。导出的属性能够直接使用,与属性关联的对象,它的信号、槽、可调用方法(使用 Q_INVOKABLE 宏修饰的方法)、属性都能够使用。仅仅是不能通过类名来引用枚举值了。

在 C++ 中使用 QML 对象

    看过了怎样在 QML 中使用 C++ 类型或对象,如今来看怎样在 C++ 中使用 QML 对象。
    我们能够使用 QML 对象的信号、槽,訪问它们的属性。都没有问题。由于非常多 QML 对象相应的类型。原本就是 C++ 类型,比方 Image 相应 QQuickImage , Text 相应 QQuickText……可是,这些与 QML 类型相应的 C++ 类型都是私有的,你写的 C++ 代码也不能直接訪问。肿么办?
    Qt 最核心的一个基础特性,就是元对象系统,通过元对象系统,你能够查询 QObject 的某个派生类的类名、有哪些信号、槽、属性、可调用方法等等信息。然后也能够使用 QMetaObject::invokeMethod() 调用 QObject 的某个注冊到元对象系统中的方法。

而对于使用 Q_PROPERTY 定义的属性,能够使用 QObject 的 property() 方法訪问属性,假设该属性定义了 WRITE 方法。还能够使用 setProperty() 改动属性。

所以仅仅要我们找到 QML 环境中的某个对象,就能够通过元对象系统来訪问它的属性、信号、槽等。

查找一个对象的孩子

    QObject 类的构造函数有一个 parent 參数。能够指定一个对象的父亲, QML 中的对象事实上借助这个组成了以根 item 为父的一棵对象树。
    而 QObject 定义了一个属性 objectName ,这个对象名字属性,就能够用于查找对象。

如今该说到查找对象的方法了: findChild() 和 findChildren() 。它们的函数原型例如以下:

T QObject::findChild(const QString & name = QString(),\
Qt::FindChildOptions options = \
Qt::FindChildrenRecursively) const;
QList<T> QObject::findChildren(const QString & name = \
QString(), Qt::FindChildOptions options = \
Qt::FindChildrenRecursively) const;
QList<T> QObject::findChildren(const QRegExp & regExp, \
Qt::FindChildOptions options = \
Qt::FindChildrenRecursively) const;
QList<T> QObject::findChildren(const QRegularExpression & re,\
Qt::FindChildOptions options = \
Qt::FindChildrenRecursively) const;

都是模板方法,从命名上也能够看出,一个返回单个对象。一个返回对象列表。闲话少说,如今让我们看看怎样查询一个或多个对象,我们先以 Qt Widgets 为例来说明使用方法哈。

    演示样例 1 :
QPushButton *button = parentWidget->findChild<QPushButton *>("button1");

查找 parentWidget 的名为 "button1" 的类型为 QPushButton 的孩子。

    演示样例 2 :
QList<QWidget *> widgets = parentWidget.findChildren<QWidget *>("widgetname");

返回 parentWidget 全部名为 "widgetname" 的 QWidget 类型的孩子列表。

使用元对象调用一个对象的方法

    QMetaObject 的 invokeMethod() 方法用来调用一个对象的信号、槽、可调用方法。它是个静态方法,其函数原型例如以下:
bool QMetaObject::invokeMethod(QObject * obj, const char * member, Qt::ConnectionType type, QGenericReturnArgument ret, QGenericArgument val0 = QGenericArgument( 0 ), QGenericArgument val1 = QGenericArgument(), QGenericArgument val2 = QGenericArgument(), QGenericArgument val3 = QGenericArgument(), QGenericArgument val4 = QGenericArgument(), QGenericArgument val5 = QGenericArgument(), QGenericArgument val6 = QGenericArgument(), QGenericArgument val7 = QGenericArgument(), QGenericArgument val8 = QGenericArgument(), QGenericArgument val9 = QGenericArgument()) [static]

事实上 QMetaObject 还有三个 invokeMethod() 函数。只是都是上面这个原型的重载,所以我们仅仅要介绍上面这个就 OK 了。

    先说返回值吧。返回 true 说明调用成功。返回 false ,要么是由于没有你说的那个方法,要么是參数类型不匹配。
    第一个參数是被调用对象的指针。
    第二个參数是方法名字。
    第三个參数是连接类型。看到这里你就知道。 invokeMethod 为信号与槽而生,你能够指定连接类型。假设你要调用的对象和发起调用的线程是同一个线程。那么能够使用 Qt::DirectConnection 或 Qt::AutoConnection 或 Qt::QueuedConnection ,假设被调用对象在另一个线程。那么建议你使用 Qt::QueuedConnection 。
    第四个參数用来接收返回指。
    然后就是多达 10 个能够传递给被调用方法的參数。

嗯。看来信号与槽的參数个数是有限制的,不能超过 10 个。

    对于要传递给被调用方法的參数,使用 QGenericArgument 来表示。你能够使用 Q_ARG 宏来构造一个參数,它的定义是:
QGenericArgument Q_ARG( Type, const Type & value)

返回类型是相似的。使用 QGenericReturnArgument 表示,你能够使用 Q_RETURN_ARG 宏来构造一个接收返回指的參数,它的定义是:

QGenericReturnArgument Q_RETURN_ARG( Type, Type & value)

好啦,总算把这个天杀的函数介绍完了,以下我们看看怎么用。

    假设一个对象有这么一个槽 compute(QString, int, double) ,返回一个 QString 对象,那么你能够这么调用(同步方式):
QString retVal;
QMetaObject::invokeMethod(obj, "compute", Qt::DirectConnection,
Q_RETURN_ARG(QString, retVal),
Q_ARG(QString, "sqrt"),
Q_ARG(int, 42),
Q_ARG(double, 9.7));

假设你要让一个线程对象退出,能够这么调用(队列连接方式):

QMetaObject::invokeMethod(thread, "quit",
Qt::QueuedConnection);

很多其他细节请參考 Qt 帮助 中的 QMetaObject 手冊。

callQml 演示样例

    如今让我们创建一个新的项目,名字是 callQml 。加入 changeColor.h 、 changeColor.cpp 两个文件。

main.qml 内容例如以下:

import QtQuick 2.0
import QtQuick.Controls 1.1 Rectangle {
objectName: "rootRect";
width: 360;
height: 360;
Text {
objectName: "textLabel";
text: "Hello World";
anchors.centerIn: parent;
font.pixelSize: 26;
} Button {
anchors.right: parent.right;
anchors.rightMargin: 4;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 4;
text: "quit";
objectName: "quitButton";
}
}

我们给根元素起了个名字 "rootRect" ,给退出按钮起了个名字 "quitButton" ,给文本起了名字 "textLabel" ,我们会在 C++ 代码中通过这些个名字来查找相应的对象并改变它们。

    如今来看看 main.cpp :
#include <QtGui/QGuiApplication>
#include "qtquick2applicationviewer.h"
#include <QQuickItem>
#include "changeColor.h"
#include <QMetaObject>
#include <QDebug>
#include <QColor>
#include <QVariant> int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv); QtQuick2ApplicationViewer viewer;
viewer.setMainQmlFile(QStringLiteral("qml/callQml/main.qml"));
viewer.showExpanded(); QQuickItem * rootItem = viewer.rootObject();
new ChangeQmlColor(rootItem);
QObject * quitButton = rootItem->findChild<QObject*>("quitButton");
if(quitButton)
{
QObject::connect(quitButton, SIGNAL(clicked()), &app, SLOT(quit()));
} QObject *textLabel = rootItem->findChild<QObject*>("textLabel");
if(textLabel)
{
//1. failed call
bool bRet = QMetaObject::invokeMethod(textLabel, "setText", Q_ARG(QString, "world hello"));
qDebug() << "call setText return - " << bRet;
textLabel->setProperty("color", QColor::fromRgb(255,0,0));
bRet = QMetaObject::invokeMethod(textLabel, "doLayout");
qDebug() << "call doLayout return - " << bRet;
} return app.exec();
}

在一開始我通过 viewer.rootObject() ,获取到了作为根元素的 Rectangle ,然后把它交给一个 ChangeQmlColor 对象,该对象会内部通过一个定时器,一秒改变一次传入对象的颜色。

    紧接着,我使用 QObject 的 findChild() 找到了 quitButton 按钮,把它的 clicked() 信号连接到 QGuiApplication 的 quit() 槽上。所以你点击这个按钮,应用就退出了。
    后来,我又通过名字 "textLabel" 找到了 textLabel 对象。首先我企图使用 invodeMethod() 调用 setText() 方法来改变 textLabel 的文本,这个注定是会失败的,由于 QML 中的Text 对象相应 C++ QQuickText 类,而 QQuickText 没有名为 setText 的槽或者可调用方法。我查看了头文件 qquicktext_p.h 。发现它有一个使用 Q_INVOKABLE 宏修饰的 doLayout() 的方法,所以后来我又调用 doLayout() ,这次成功了。
    图 2 是执行效果:
Qt Quick 之 QML 与 C++ 混合编程具体解释

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZm9ydW9r/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

            图 2 callQml 执行效果图
    Hello World 这行字变成了红色。是由于我在 main() 函数中使用 setProperty 改动了 textLabel 的 color 属性。
    以下是 Qt Creator 应用程序输出窗体的信息,能够验证对 Text 方法的调用是否成功:
Starting D:\projects\...\release\callQml.exe...
QMetaObject::invokeMethod: No such method QQuickText::setText(QString)
call setText return - false
call doLayout return - true

好啦,最后看看界面背景为么变成了浅绿色。这正是以下这行代码的功劳:

new ChangeQmlColor(rootItem);

它以 rootItem 为參数创建了一个 ChangeQmlColor 对象,而 ChangeQmlColor 类会改变传给它的对象的颜色。 

    ChangeQmlColor 类定义例如以下:
#ifndef CHANGECOLOR_H
#define CHANGECOLOR_H
#include <QObject>
#include <QTimer> class ChangeQmlColor : public QObject
{
Q_OBJECT
public:
ChangeQmlColor(QObject *target, QObject *parent = 0);
~ChangeQmlColor(); protected slots:
void onTimeout(); private:
QTimer m_timer;
QObject *m_target;
}; #endif

实现文件 changeColor.cpp :

#include "changeColor.h"
#include <QDateTime>
#include <QColor>
#include <QVariant> ChangeQmlColor::ChangeQmlColor(QObject *target, QObject *parent)
: QObject(parent)
, m_timer(this)
, m_target(target)
{
qsrand(QDateTime::currentDateTime().toTime_t());
connect(&m_timer, SIGNAL(timeout()), this, SLOT(onTimeout()));
m_timer.start(1000);
} ChangeQmlColor::~ChangeQmlColor()
{} void ChangeQmlColor::onTimeout()
{
QColor color = QColor::fromRgb(qrand()%256, qrand()%256, qrand()%256);
m_target->setProperty("color", color);
}

非常easy,不说啦。

版权全部 foruok 。转载请注明出处:http://blog.csdn.net/foruok 。

    My God !最终说完了吗? QML 中使用 C++ 对象, C++ 中使用 QML 对象……不知道你看明确没?
    回想一下吧:

Qt Quick 之 QML 与 C++ 混合编程具体解释的更多相关文章

  1. 【Qt】Qt Quick 之 QML 与 C&plus;&plus; 混合编程详解

    Qt Quick 之 QML 与 C++ 混合编程详解 - CSDN博客   专栏:Qt Quick简明教程 - CSDN博客   .

  2. Qt Quick 和qml介绍

    很多人不了解Qt Quick和Qml,还有很多人对其存在偏见.这篇文章就是来向这些有困惑的人介绍一下其是什么,有什么特点. 首先,这两个是一个东西吗? 答案:是的.但是,具体来说,Qt Quick是框 ...

  3. QML与C&plus;&plus;混合编程详解(转)

    原文转自:http://blog.csdn.net/ieearth/article/details/42243553 原文转自:https://www.cnblogs.com/findumars/p/ ...

  4. QML与C&plus;&plus;混合编程详解

    1.QML与C++为什么要混合编程 QML与C++为什么要混合编程,简单来说,就是使用QML高效便捷地构建UI,而C++则用来实现业务逻辑和复杂算法,下面介绍了两者间交互的方法与技巧. 2.QML访问 ...

  5. qml与c&plus;&plus;混合编程

    QML 与 C++ 混合编程内容:1. QML 扩展2. C++ 与 QML 交互3. 开发时要尽量避免使用的 QML 元素4. demo 讲解5. QML 语法C++ 与 QML 的交互是通过注册 ...

  6. qt quick中qml编程语言

    Qt QML 入门 — 使用C++定义QML类型 发表于 2013 年 3 月 11 日   注册C++类 注册可实例化的类型 注册不实例化的QML类型 附带属性 注册C++类 注册可实例化的类型 如 ...

  7. 由基于qml,c&plus;&plus;的串口调试工具浅谈qml与c&plus;&plus;混合编程

    最近在做一个基于sim900 的串口通信工具,基于qml和c++来实现. 首先,对于串口,qt有自带的QSerialPort,可以实现同步,和异步通信,qt creator也有自带的例子,本例子是从其 ...

  8. Qt Quick 与 QML语言&lpar;初学笔记1&rpar;

    Qt Quick Qt Quick是一些新的UI技术的集合,用来帮助开发者创建一种现在越来越多用于手机.多媒体播放器.机顶盒以及其他便携式设备上的直观的.现代的.流畅的用户界面.简单来说,Qt Qui ...

  9. 【QML与C&plus;&plus;混合编程】用QVariantList传递数组类型成员

    2017.5.8 更新:Record类要用指针,QObject 不能有拷贝函数. 我有一个C++中自定义的ReaderModel,继承自QAbstractListModel类,传递给了QML. 它的m ...

随机推荐

  1. winform在设置控件enabled&equals;false后,无法更改控件字体颜色的问题

    项目界面设计的时候,发现在设置button的enabled=false后,原本设计的字体颜色跟预设的不一样,查了一些资料后,在网上看到这样一段代码: [System.Runtime.InteropSe ...

  2. JavaScript 数据类型判断

    JavaScript 的数据类型分为两类:原始类型(基本类型)和对象类型(引用类型).原始类型包括数字.字符串和布尔值,另外有两个特殊的原始值:null 和 undefined,除此之外的都是对象.对 ...

  3. GUI用户界面编程

    Java的GUI编程(Graphic User Interface,图形用户接口),是在它的抽象窗口工具箱(Abstract Window Toolkit,AWT)上实现的,java.awt是AWT的 ...

  4. 多看Kindle的&OpenCurlyDoubleQuote;导出失败&comma;请检查网络或账号”错误的解决

    一直都用得好好的,今天突然不行了,报错“导出失败,请检查网络或账号”. 网上搜索,试了一下这个方法: 我目前的解决办法是:先同步至小米账户(需要联网,并在Kindle系统设置 -> 阅读 -&g ...

  5. Keytool生成csr

    一. 首先生成密钥库 keytool -genkey -keyalg RSA -keysize 4096 -keystore c:\keystore4096.jks 二.生成csr keytool - ...

  6. 第一次使用easyUI

    一.项目结构图 二.在WebContent下新建resource文件夹,在resource底下创建easyui.将easyUI包放入其中. 三.在springMVC-servlet.xml写入资源路径 ...

  7. Linux基础知识(二)

    1. 请回答,32位和64位有什么区别呢?什么时候安装32位的,又什么时候安装64位操作系统呢?如何查看系统是32位的还是64位的? 所谓的32位.64位指的是CPU的GPRs(General-Pur ...

  8. VS 2017开发插件

    codemaid 代码清洁工具 commentsPlus 注释以斜体方式展示,并提供额外的注释格式 viasfora 尖括号颜色设置 reshaper 必备

  9. Jenkins 学习笔记(一):我对 Jenkins 的宏观认识

    Jenkins 是一个持续构建的系统,通过一周的了解熟悉,其逻辑似乎很简单. Jenkins 拓扑 Jenkins 逻辑 1. 从代码库拉取代码. 2. 处理代码. 对于需要编译的程序,需要进行处理, ...

  10. the confilict between validation and readonly in jquery

    How can I disable jquery validation on readonly fields? http://*.com/questions/10803294/ ...