Qt Quick之QML與C++混合編程詳解
Qt Quick 技術的引入，使得你可以快速構建 UI ，具備動畫、各類絢麗效果的 UI 都不在話下。但它不是萬能的，也有不少侷限性，原來 Qt 的一些技術，好比低階的網絡編程如 QTcpSocket ，多線程，又如 XML 文檔處理類庫 QXmlStreamReader / QXmlStreamWriter 等等，在 QML 中要麼不可用，要麼用起來不方便，因此呢，不少時候咱們是會基於這樣的原則來混合使用 QML 和 C++： QML 構建界面， C++ 實現非界面的業務邏輯和複雜運算。算法
那這篇呢，咱們就來看看 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 。app
colorMaker 只是一個示例項目，我在 C++ 中實現一個 ColorMaker 類，它能夠被註冊爲一個 QML 類型供 QML 像內建類型同樣使用，它的實例也能夠導出爲 QML 上下文屬性在 QML 中訪問。咱們的示例只是在界面頂部顯示當前時間（時間文字的顏色隨時間變化而變化），在界面中間顯示一個變色矩形，在界面底部放置幾個按鈕來控制顏色如何變化。dom
圖 1 是效果圖：ide
圖 1 colorMaker 效果圖函數
在 QML 中使用 C++ 類和對象咱們知道， QML 實際上是對 JavaScript 的擴展，融合了 Qt Object 系統，它是一種新的解釋型的語言， QML 引擎雖然由 Qt C++ 實現，但 QML 對象的運行環境，說到底和 C++ 對象的上下文環境是不一樣的，是平行的兩個世界。若是你想在 QML 中訪問 C++ 對象，那麼必然要找到一種途徑來在兩個運行環境之間創建溝通橋樑。佈局
Qt 提供了兩種在 QML 環境中使用 C++ 對象的方式：學習
- 在 C++ 中實現一個類，註冊到 QML 環境中， QML 環境中使用該類型建立對象
- 在 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 類的聲明：
1 class ColorMaker : public QObject
2 {
3 Q_OBJECT
4
5 public:
6 ColorMaker(QObject *parent = 0);
7 ~ColorMaker();
8
9 signals:
10 void colorChanged(const QColor & color);
11 void currentTime(const QString &strTime);
12
13 public slots:
14 void start();
15 void stop();
16
17 };
咱們定義了 start() / stop() 兩個槽， colorChanged() / currentTime() 兩個信號，均可以在 QML 中使用。
Q_INVOKABLE 宏
在定義一個類的成員函數時使用 Q_INVOKABLE 宏來修飾，就可讓該方法被元對象系統調用。這個宏必須放在返回類型前面。
我給 ColorMaker 添加了兩個使用 Q_INVOKABLE 宏修飾的方法，如今 ColorMaker 類的聲明變成了這個樣子：
1 class ColorMaker : public QObject
2 {
3 Q_OBJECT
4
5 public:
6 ColorMaker(QObject *parent = 0);
7 ~ColorMaker();
8
9 Q_INVOKABLE GenerateAlgorithm algorithm() const;
10 Q_INVOKABLE void setAlgorithm(GenerateAlgorithm algorithm);
11
12 signals:
13 void colorChanged(const QColor & color);
14 void currentTime(const QString &strTime);
15
16 public slots:
17 void start();
18 void stop();
19 };
一旦你使用 Q_INVOKABLE 將某個方法註冊到元對象系統中，在 QML 中就能夠用 ${Object}.${method} 來訪問，colorMaker 的 main.qml 中有使用 algorithm() 和 setAlgorithm() 的 QML 代碼 ：
1 Component.onCompleted: {
2 colorMaker.color = Qt.rgba(0,180,120, 255);
3 colorMaker.setAlgorithm(ColorMaker.LinearIncrease);
4 changeAlgorithm(colorAlgorithm, colorMaker.algorithm());
5 }
我在根元素建立完成時初始化 colorMaker 對象，給它設定了顏色生成算法，同時改變界面上切換顏色生成算法的按鈕的文字。
Q_ENUMS
若是你要導出的類定義了想在 QML 中使用枚舉類型，可使用 Q_ENUMS 宏將該枚舉註冊到元對象系統中。
ColorMaker 類定義了 GenerateAlgorithm 枚舉類型，支持 RandomRGB / RandomRed 等顏色生成算法。如今 ColorMaker 類的聲明變成了這個樣子：
1 class ColorMaker : public QObject
2 {
3 Q_OBJECT
4 Q_ENUMS(GenerateAlgorithm)
5
6 public:
7 ColorMaker(QObject *parent = 0);
8 ~ColorMaker();
9
10 enum GenerateAlgorithm{
11 RandomRGB,
12 RandomRed,
13 RandomGreen,
14 RandomBlue,
15 LinearIncrease
16 };
17
18 Q_INVOKABLE GenerateAlgorithm algorithm() const;
19 Q_INVOKABLE void setAlgorithm(GenerateAlgorithm algorithm);
20
21 signals:
22 void colorChanged(const QColor & color);
23 void currentTime(const QString &strTime);
24
25 public slots:
26 void start();
27 void stop();
28 };
一旦你使用 Q_ENUMS 宏註冊了你的枚舉類型，在 QML 中就能夠用 ${CLASS_NAME}.${ENUM_VALUE} 的形式來訪問，好比 ColorMaker.LinearIncrease ，上節展現的 QML 代碼片斷已經使用了導出的枚舉類型。
Q_PROPERTY
Q_PROPERTY 宏用來定義可經過元對象系統訪問的屬性，經過它定義的屬性，能夠在 QML 中訪問、修改，也能夠在屬性變化時發射特定的信號。要想使用 Q_PROPERTY 宏，你的類必須是 QObject 的後裔，必須在類首使用 Q_OBJECT 宏。
下面是 Q_PROPERTY 宏的原型：
1 Q_PROPERTY(type name 2 (READ getFunction [WRITE setFunction] | 3 MEMBER memberName [(READ getFunction | WRITE setFunction)]) 4 [RESET resetFunction] 5 [NOTIFY notifySignal] 6 [REVISION int] 7 [DESIGNABLE bool] 8 [SCRIPTABLE bool] 9 [STORED bool] 10 [USER bool] 11 [CONSTANT] 12 [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 的使用：
1 class QQuickText : public QQuickImplicitSizeItem
2 {
3 Q_OBJECT
4 Q_ENUMS(HAlignment)
5
6
7 Q_PROPERTY(QString text READ text WRITE setText NOTIFY textChanged)
8 Q_PROPERTY(QFont font READ font WRITE setFont NOTIFY fontChanged)
9 Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged)
10 ...
11
12 public:
13 enum HAlignment { AlignLeft = Qt::AlignLeft,
14 AlignRight = Qt::AlignRight,
15 AlignHCenter = Qt::AlignHCenter,
16 AlignJustify = Qt::AlignJustify };
17 ...
18 QString text() const;
19 void setText(const QString &);
20
21 QFont font() const;
22 void setFont(const QFont &font);
23
24 QColor color() const;
25 void setColor(const QColor &c);
26 ...
27 };
如今給咱們的 ColorMaker 類添加一些屬性，以便 QML 能夠獲取、設置顏色值。新的 ColorMaker 類以下：
1 class ColorMaker : public QObject
2 {
3 Q_OBJECT
4 Q_ENUMS(GenerateAlgorithm)
5 Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged)
6 Q_PROPERTY(QColor timeColor READ timeColor)
7
8 public:
9 ColorMaker(QObject *parent = 0);
10 ~ColorMaker();
11
12 enum GenerateAlgorithm{
13 RandomRGB,
14 RandomRed,
15 RandomGreen,
16 RandomBlue,
17 LinearIncrease
18 };
19
20 QColor color() const;
21 void setColor(const QColor & color);
22 QColor timeColor() const;
23
24 Q_INVOKABLE GenerateAlgorithm algorithm() const;
25 Q_INVOKABLE void setAlgorithm(GenerateAlgorithm algorithm);
26
27 signals:
28 void colorChanged(const QColor & color);
29 void currentTime(const QString &strTime);
30
31 public slots:
32 void start();
33 void stop();
34
35 protected:
36 void timerEvent(QTimerEvent *e);
37
38 private:
39 GenerateAlgorithm m_algorithm;
40 QColor m_currentColor;
41 int m_nColorTimer;
42 };
如今咱們的 ColorMaker 已是一個完整的類了，有信號、有槽、有使用 Q_INVOKABLE 註冊的方法，還導出了枚舉類型，小小麻雀五臟俱全。
是時候看看它的實現了。翠花，上代碼：
1 #include "colorMaker.h"
2 #include <QTimerEvent>
3 #include <QDateTime>
4
5 ColorMaker::ColorMaker(QObject *parent)
6 : QObject(parent)
7 , m_algorithm(RandomRGB)
8 , m_currentColor(Qt::black)
9 , m_nColorTimer(0)
10 {
11 qsrand(QDateTime::currentDateTime().toTime_t());
12 }
13
14 ColorMaker::~ColorMaker()
15 {
16 }
17
18 QColor ColorMaker::color() const
19 {
20 return m_currentColor;
21 }
22
23 void ColorMaker::setColor(const QColor &color)
24 {
25 m_currentColor = color;
26 emit colorChanged(m_currentColor);
27 }
28
29 QColor ColorMaker::timeColor() const
30 {
31 QTime time = QTime::currentTime();
32 int r = time.hour();
33 int g = time.minute()*2;
34 int b = time.second()*4;
35 return QColor::fromRgb(r, g, b);
36 }
37
38 ColorMaker::GenerateAlgorithm ColorMaker::algorithm() const
39 {
40 return m_algorithm;
41 }
42
43 void ColorMaker::setAlgorithm(GenerateAlgorithm algorithm)
44 {
45 m_algorithm = algorithm;
46 }
47
48 void ColorMaker::start()
49 {
50 if(m_nColorTimer == 0)
51 {
52 m_nColorTimer = startTimer(1000);
53 }
54 }
55
56 void ColorMaker::stop()
57 {
58 if(m_nColorTimer > 0)
59 {
60 killTimer(m_nColorTimer);
61 m_nColorTimer = 0;
62 }
63 }
64
65 void ColorMaker::timerEvent(QTimerEvent *e)
66 {
67 if(e->timerId() == m_nColorTimer)
68 {
69 switch(m_algorithm)
70 {
71 case RandomRGB:
72 m_currentColor.setRgb(qrand() % 255, qrand() % 255, qrand() % 255);
73 break;
74 case RandomRed:
75 m_currentColor.setRed(qrand() % 255);
76 break;
77 case RandomGreen:
78 m_currentColor.setGreen(qrand() % 255);
79 break;
80 case RandomBlue:
81 m_currentColor.setBlue(qrand() % 255);
82 break;
83 case LinearIncrease:
84 {
85 int r = m_currentColor.red() + 10;
86 int g = m_currentColor.green() + 10;
87 int b = m_currentColor.blue() + 10;
88 m_currentColor.setRgb(r % 255, g % 255, b % 255);
89 }
90 break;
91 }
92 emit colorChanged(m_currentColor);
93 emit currentTime(QDateTime::currentDateTime().toString("yyyy-MM-dd hh:mm:ss"));
94 }
95 else
96 {
97 QObject::timerEvent(e);
98 }
99 }
我使用一個週期爲 1000 的定時器來產生顏色，定時器觸發時根據算法來構造新的顏色值，發射 colorChanged 信號，同時也發送一個 currentTime 信號。
註冊一個 QML 中可用的類型
看過了怎樣實現一個可供 QML 訪問的類，這節咱們看看怎樣將一個 C++ 類型註冊爲 QML 類型以及怎樣在 QML 中使用這個類型。
要達到這種目的，大概能夠分四步：
- 實現 C++ 類
- 註冊 QML 類型
- 在 QML 中導入類型
- 在 QML 建立由 C++ 導出的類型的實例並使用
ColorMaker 已經就緒了，如今看看怎樣將其註冊爲 QML 可使用的類型。
註冊 QML 類型
要註冊一個 QML 類型，有多種方法可用，如 qmlRegisterSingletonType() 用來註冊一個單例類型， qmlRegisterType() 註冊一個非單例的類型， qmlRegisterTypeNotAvailable() 註冊一個類型用來佔位， qmlRegisterUncreatableType() 一般用來註冊一個具備附加屬性的附加類型，……好吧，我這裏只說常規的類型註冊，其它的，請您參考 Qt SDK 吧。
qmlRegisterType() 是個模板函數，有兩個原型：
1 template<typename T> 2 int qmlRegisterType(const char *uri, int versionMajor, int versionMinor, const char *qmlName); 3 4 template<typename T, int metaObjectRevision> 5 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 文件：
1 #include <QtGui/QGuiApplication>
2 #include "qtquick2applicationviewer.h"
3 #include <QtQml>
4 #include "colorMaker.h"
5
6
7 int main(int argc, char *argv[])
8 {
9 QGuiApplication app(argc, argv);
10 qmlRegisterType<ColorMaker>("an.qt.ColorMaker", 1, 0, "ColorMaker");
11
12 QtQuick2ApplicationViewer viewer;
13 viewer.setMainQmlFile(QStringLiteral("qml/colorMaker/main.qml"));
14 viewer.showExpanded();
15
16 return app.exec();
17 }
上面的代碼將 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 實例的代碼：
1 Rectangle {
2 width: 360;
3 height: 360;
4
5 ColorMaker {
6 id: colorMaker;
7 color: Qt.green;
8 }
9 }
如你所見，ColorMaker 的使用與 Retangle 沒什麼區別。若是你想在別處引用 ColorMaker 的實例，能夠給實例指定一個惟一的 id ，就像上面的代碼中那樣。
完整的 colorMaker 實例
如何定義一個能夠導出到 QML 中的 C++ 類、如何註冊 QML 類型、如何在 QML 中使用 C++ 導出的類型，都介紹完了，如今來看看完整的 colorMaker 。
若是你對如何在 QML 中使用信號與槽還有疑問，請溫習下《 Qt Quick 事件處理之信號與槽》再往下看。若是你對 QML 的基本語法忘了，請溫習《 QML 語言基礎》。若是你不記得 Qt Quick 的基本元素，看《 Qt Quick 簡單教程》吧。
C++ 代碼前面都展現過了，這裏看下完整的 main.qml 文檔：
1 import QtQuick 2.0
2 import QtQuick.Controls 1.1
3 import an.qt.ColorMaker 1.0
4
5 Rectangle {
6 width: 360;
7 height: 360;
8 Text {
9 id: timeLabel;
10 anchors.left: parent.left;
11 anchors.leftMargin: 4;
12 anchors.top: parent.top;
13 anchors.topMargin: 4;
14 font.pixelSize: 26;
15 }
16 ColorMaker {
17 id: colorMaker;
18 color: Qt.green;
19 }
20
21 Rectangle {
22 id: colorRect;
23 anchors.centerIn: parent;
24 width: 200;
25 height: 200;
26 color: "blue";
27 }
28
29 Button {
30 id: start;
31 text: "start";
32 anchors.left: parent.left;
33 anchors.leftMargin: 4;
34 anchors.bottom: parent.bottom;
35 anchors.bottomMargin: 4;
36 onClicked: {
37 colorMaker.start();
38 }
39 }
40 Button {
41 id: stop;
42 text: "stop";
43 anchors.left: start.right;
44 anchors.leftMargin: 4;
45 anchors.bottom: start.bottom;
46 onClicked: {
47 colorMaker.stop();
48 }
49 }
50
51 function changeAlgorithm(button, algorithm){
52 switch(algorithm)
53 {
54 case 0:
55 button.text = "RandomRGB";
56 break;
57 case 1:
58 button.text = "RandomRed";
59 break;
60 case 2:
61 button.text = "RandomGreen";
62 break;
63 case 3:
64 button.text = "RandomBlue";
65 break;
66 case 4:
67 button.text = "LinearIncrease";
68 break;
69 }
70 }
71
72 Button {
73 id: colorAlgorithm;
74 text: "RandomRGB";
75 anchors.left: stop.right;
76 anchors.leftMargin: 4;
77 anchors.bottom: start.bottom;
78 onClicked: {
79 var algorithm = (colorMaker.algorithm() + 1) % 5;
80 changeAlgorithm(colorAlgorithm, algorithm);
81 colorMaker.setAlgorithm(algorithm);
82 }
83 }
84
85 Button {
86 id: quit;
87 text: "quit";
88 anchors.left: colorAlgorithm.right;
89 anchors.leftMargin: 4;
90 anchors.bottom: start.bottom;
91 onClicked: {
92 Qt.quit();
93 }
94 }
95
96 Component.onCompleted: {
97 colorMaker.color = Qt.rgba(0,180,120, 255);
98 colorMaker.setAlgorithm(ColorMaker.LinearIncrease);
99 changeAlgorithm(colorAlgorithm, colorMaker.algorithm());
100 }
101
102 Connections {
103 target: colorMaker;
104 onCurrentTime:{
105 timeLabel.text = strTime;
106 timeLabel.color = colorMaker.timeColor;
107 }
108 }
109
110 Connections {
111 target: colorMaker;
112 onColorChanged:{
113 colorRect.color = color;
114 }
115 }
116 }
main.qml 的界面分紅了三部分，參看圖 1 。頂部是一個 Text ，用來顯示由 ColorMaker 提供的時間，我使用 Connections 對象，指定 target 爲 colorMaker ，在 onCurrentTime 信號處理器中改變 timeLabel 的文本和顏色。這裏使用 ColorMaker 的 timeColor 屬性，該屬性的讀取函數是 timeColor ，回看一下 colorMaker.cpp 中的實現：
1 QColor ColorMaker::timeColor() const
2 {
3 QTime time = QTime::currentTime();
4 int r = time.hour();
5 int g = time.minute()*2;
6 int b = time.second()*4;
7 return QColor::fromRgb(r, g, b);
8 }
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 爲例，對其代碼作適當修改來適應本節的內容。
註冊屬性
要將一個對象註冊爲屬性很簡單，colorMaker 的 main.cpp 修改後以下：
1 #include <QtGui/QGuiApplication>
2 #include "qtquick2applicationviewer.h"
3 #include <QtQml>
4 #include "colorMaker.h"
5
6
7 int main(int argc, char *argv[])
8 {
9 QGuiApplication app(argc, argv);
10
11 QtQuick2ApplicationViewer viewer;
12
13 viewer.rootContext()->setContextProperty("colorMaker", new ColorMaker);
14
15 viewer.setMainQmlFile(QStringLiteral("qml/colorMaker/main.qml"));
16 viewer.showExpanded();
17
18 return app.exec();
19 }
注意我在 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 修改後的代碼：
1 import QtQuick 2.0
2 import QtQuick.Controls 1.1
3 //[1]
4 //import an.qt.ColorMaker 1.0
5
6 Rectangle {
7 width: 360;
8 height: 360;
9 Text {
10 id: timeLabel;
11 anchors.left: parent.left;
12 anchors.leftMargin: 4;
13 anchors.top: parent.top;
14 anchors.topMargin: 4;
15 font.pixelSize: 26;
16 }
17 /* [2]
18 ColorMaker {
19 id: colorMaker;
20 color: Qt.green;
21 }
22 */
23
24 Rectangle {
25 id: colorRect;
26 anchors.centerIn: parent;
27 width: 200;
28 height: 200;
29 color: "blue";
30 }
31
32 Button {
33 id: start;
34 text: "start";
35 anchors.left: parent.left;
36 anchors.leftMargin: 4;
37 anchors.bottom: parent.bottom;
38 anchors.bottomMargin: 4;
39 onClicked: {
40 colorMaker.start();
41 }
42 }
43 Button {
44 id: stop;
45 text: "stop";
46 anchors.left: start.right;
47 anchors.leftMargin: 4;
48 anchors.bottom: start.bottom;
49 onClicked: {
50 colorMaker.stop();
51 }
52 }
53
54 function changeAlgorithm(button, algorithm){
55 switch(algorithm)
56 {
57 case 0:
58 button.text = "RandomRGB";
59 break;
60 case 1:
61 button.text = "RandomRed";
62 break;
63 case 2:
64 button.text = "RandomGreen";
65 break;
66 case 3:
67 button.text = "RandomBlue";
68 break;
69 case 4:
70 button.text = "LinearIncrease";
71 break;
72 }
73 }
74
75 Button {
76 id: colorAlgorithm;
77 text: "RandomRGB";
78 anchors.left: stop.right;
79 anchors.leftMargin: 4;
80 anchors.bottom: start.bottom;
81 onClicked: {
82 var algorithm = (colorMaker.algorithm() + 1) % 5;
83 changeAlgorithm(colorAlgorithm, algorithm);
84 colorMaker.setAlgorithm(algorithm);
85 }
86 }
87
88 Button {
89 id: quit;
90 text: "quit";
91 anchors.left: colorAlgorithm.right;
92 anchors.leftMargin: 4;
93 anchors.bottom: start.bottom;
94 onClicked: {
95 Qt.quit();
96 }
97 }
98
99 Component.onCompleted: {
100 colorMaker.color = Qt.rgba(0,180,120, 255);
101 //[3]
102 //colorMaker.setAlgorithm(ColorMaker.LinearIncrease);
103 colorMaker.setAlgorithm(2);
104 changeAlgorithm(colorAlgorithm, colorMaker.algorithm());
105 }
106
107 Connections {
108 target: colorMaker;
109 onCurrentTime:{
110 timeLabel.text = strTime;
111 timeLabel.color = colorMaker.timeColor;
112 }
113 }
114
115 Connections {
116 target: colorMaker;
117 onColorChanged:{
118 colorRect.color = color;
119 }
120 }
121 }
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() 。它們的函數原型以下：
1 T QObject::findChild(const QString & name = QString(),\ 2 Qt::FindChildOptions options = \ 3 Qt::FindChildrenRecursively) const; 4 QList<T> QObject::findChildren(const QString & name = \ 5 QString(), Qt::FindChildOptions options = \ 6 Qt::FindChildrenRecursively) const; 7 QList<T> QObject::findChildren(const QRegExp & regExp, \ 8 Qt::FindChildOptions options = \ 9 Qt::FindChildrenRecursively) const; 10 QList<T> QObject::findChildren(const QRegularExpression & re,\ 11 Qt::FindChildOptions options = \ 12 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( Type, Type & value)
假設一個對象有這麼一個槽 compute(QString, int, double) ，返回一個 QString 對象，那麼你能夠這麼調用（同步方式）：
1 QString retVal; 2 QMetaObject::invokeMethod(obj, "compute", Qt::DirectConnection, 3 Q_RETURN_ARG(QString, retVal), 4 Q_ARG(QString, "sqrt"), 5 Q_ARG(int, 42), 6 Q_ARG(double, 9.7));
若是你要讓一個線程對象退出，能夠這麼調用（隊列鏈接方式）：
1 QMetaObject::invokeMethod(thread, "quit", 2 Qt::QueuedConnection);
更多細節請參考 Qt 幫助 中的 QMetaObject 手冊。
callQml 示例
如今讓咱們建立一個新的項目，名字是 callQml ，添加 changeColor.h 、 changeColor.cpp 兩個文件。 main.qml 內容以下：
1 import QtQuick 2.0
2 import QtQuick.Controls 1.1
3
4 Rectangle {
5 objectName: "rootRect";
6 width: 360;
7 height: 360;
8 Text {
9 objectName: "textLabel";
10 text: "Hello World";
11 anchors.centerIn: parent;
12 font.pixelSize: 26;
13 }
14
15 Button {
16 anchors.right: parent.right;
17 anchors.rightMargin: 4;
18 anchors.bottom: parent.bottom;
19 anchors.bottomMargin: 4;
20 text: "quit";
21 objectName: "quitButton";
22 }
23 }
咱們給根元素起了個名字 "rootRect" ，給退出按鈕起了個名字 "quitButton" ，給文本起了名字 "textLabel" ，咱們會在 C++ 代碼中經過這些個名字來查找對應的對象並改變它們。
如今來看看 main.cpp ：
1 #include <QtGui/QGuiApplication>
2 #include "qtquick2applicationviewer.h"
3 #include <QQuickItem>
4 #include "changeColor.h"
5 #include <QMetaObject>
6 #include <QDebug>
7 #include <QColor>
8 #include <QVariant>
9
10 int main(int argc, char *argv[])
11 {
12 QGuiApplication app(argc, argv);
13
14 QtQuick2ApplicationViewer viewer;
15 viewer.setMainQmlFile(QStringLiteral("qml/callQml/main.qml"));
16 viewer.showExpanded();
17
18 QQuickItem * rootItem = viewer.rootObject();
19 new ChangeQmlColor(rootItem);
20 QObject * quitButton = rootItem->findChild<QObject*>("quitButton");
21 if(quitButton)
22 {
23 QObject::connect(quitButton, SIGNAL(clicked()), &app, SLOT(quit()));
24 }
25
26 QObject *textLabel = rootItem->findChild<QObject*>("textLabel");
27 if(textLabel)
28 {
29 //1. failed call
30 bool bRet = QMetaObject::invokeMethod(textLabel, "setText", Q_ARG(QString, "world hello"));
31 qDebug() << "call setText return - " << bRet;
32 textLabel->setProperty("color", QColor::fromRgb(255,0,0));
33 bRet = QMetaObject::invokeMethod(textLabel, "doLayout");
34 qDebug() << "call doLayout return - " << bRet;
35 }
36
37 return app.exec();
38 }
在一開始我經過 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 是運行效果：
圖 2 callQml 運行效果圖
Hello World 這行字變成了紅色，是由於我在 main() 函數中使用 setProperty 修改了 textLabel 的 color 屬性。
下面是 Qt Creator 應用程序輸出窗口的信息，能夠驗證對 Text 方法的調用是否成功：
1 Starting D:\projects\...\release\callQml.exe... 2 QMetaObject::invokeMethod: No such method QQuickText::setText(QString) 3 call setText return - false 4 call doLayout return - true
好啦，最後看看界面背景爲麼變成了淺綠色。這正是下面這行代碼的功勞：
new ChangeQmlColor(rootItem);
它以 rootItem 爲參數建立了一個 ChangeQmlColor 對象，而 ChangeQmlColor 類會改變傳給它的對象的顏色。
ChangeQmlColor 類定義以下：
1 #ifndef CHANGECOLOR_H
2 #define CHANGECOLOR_H
3 #include <QObject>
4 #include <QTimer>
5
6 class ChangeQmlColor : public QObject
7 {
8 Q_OBJECT
9 public:
10 ChangeQmlColor(QObject *target, QObject *parent = 0);
11 ~ChangeQmlColor();
12
13 protected slots:
14 void onTimeout();
15
16 private:
17 QTimer m_timer;
18 QObject *m_target;
19 };
20
21 #endif
實現文件 changeColor.cpp ：
1 #include "changeColor.h"
2 #include <QDateTime>
3 #include <QColor>
4 #include <QVariant>
5
6 ChangeQmlColor::ChangeQmlColor(QObject *target, QObject *parent)
7 : QObject(parent)
8 , m_timer(this)
9 , m_target(target)
10 {
11 qsrand(QDateTime::currentDateTime().toTime_t());
12 connect(&m_timer, SIGNAL(timeout()), this, SLOT(onTimeout()));
13 m_timer.start(1000);
14 }
15
16 ChangeQmlColor::~ChangeQmlColor()
17 {}
18
19 void ChangeQmlColor::onTimeout()
20 {
21 QColor color = QColor::fromRgb(qrand()%256, qrand()%256, qrand()%256);
22 m_target->setProperty("color", color);
23 }
很簡單，不說啦。
相關文章
- 1. 【Qt】Qt Quick 之 QML 與 C++ 混合編程詳解
- 2. Qt Quick 之 QML 與 C++ 混合編程詳解
- 3. Qt Quick 之 QML 與 C 混合編程詳解
- 4. Qt Quick 之 QML 與 C++ 混合編程具體解釋
- 5. QML與C++混合編程詳解
- 6. QML與C++混合編程（一）
- 7. QT開發（六十九）——QML與C++混合編程
- 8. qml和C++混合編程，UI和業務邏輯混合
- 9. Qt Quick QML
- 10. 24.Qt Quick QML-Canvas和Context2D詳解
- 更多相關文章...
- • XSD 混合內容 - XML Schema 教程
- • 免費ARP詳解 - TCP/IP教程
- • Flink 數據傳輸及反壓詳解
- • C# 中 foreach 遍歷的用法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 安裝cuda+cuDNN
- 2. GitHub的使用說明
- 3. phpDocumentor使用教程【安裝PHPDocumentor】
- 4. yarn run build報錯Component is not found in path 「npm/taro-ui/dist/weapp/components/rate/index「
- 5. 精講Haproxy搭建Web集羣
- 6. 安全測試基礎之MySQL
- 7. C/C++編程筆記：C語言中的複雜聲明分析，用實例帶你完全讀懂
- 8. Python3教程(1)----搭建Python環境
- 9. 李宏毅機器學習課程筆記2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里雲ECS配置速記
歡迎關注本站公眾號,獲取更多信息
