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 。
colorMaker 只是一個示例項目，我在 C++ 中實現一個 ColorMaker 類，它可以被注冊為一個 QML 類型供 QML 像內建類型一樣使用，它的實例也可以導出為 QML 上下文屬性在 QML 中訪問。我們的示例只是在界面頂部顯示當前時間（時間文字的顏色隨時間變化而變化），在界面中間顯示一個變色矩形，在界面底部放置幾個按鈕來控制顏色如何變化。
圖 1 是效果圖：
圖 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 }
很簡單，不說啦。