Qt Quick 之 QML 與 C++ 混合程式設計詳解

阿新 • • 發佈：2019-01-07

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 類的宣告：

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 中使用這個型別。要達到這種目的，大概可以分四步：

實現 C++ 類
註冊 QML 型別
在 QML 中匯入型別
在 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 為例，對其程式碼做適當修改來適應本節的內容。

註冊屬性

要將一個物件註冊為屬性很簡單，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 是執行效果：

圖 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);
}

很簡單，不說啦。 My God ！終於說完了嗎？ QML 中使用 C++ 物件， C++ 中使用 QML 物件……不知道你看明白沒？回顧一下吧：

Qt Quick 之 QML 與 C++ 混合程式設計詳解

在 QML 中使用 C++ 類和物件

實現可以匯出的 C++ 類

前提條件

訊號，槽

Q_INVOKABLE 巨集

Q_ENUMS

Q_PROPERTY

註冊一個 QML 中可用的型別

註冊 QML 型別

在 QML 中匯入 C++ 註冊的型別

在 QML 中建立 C++ 匯入型別的例項

完整的 colorMaker 例項

匯出一個 C++ 物件為 QML 的屬性

註冊屬性

在 QML 中使用關聯到 C++ 物件的屬性

在 C++ 中使用 QML 物件

查詢一個物件的孩子

使用元物件呼叫一個物件的方法

callQml 示例

Qt Quick 之 QML 與 C++ 混合程式設計詳解

Qt Quick 之 QML 與 C++ 混合編程具體解釋

QML與C++混合程式設計

QML與C++混合程式設計（二）：QML獲得C++類中的屬性

Python與C混合程式設計！是Python和C都不具備的超能力！

如玫瑰一般的PHP與C#混合程式設計

keras上手之：與tensorflow混合程式設計 (tensorboard)

QML 入門之QMl與C++類相互訪問(一)

matlab與C++混合程式設計 matlab釋出、打包DLL

C與C++混合程式設計問題：.C++呼叫.C檔案時出現：undefined reference to `xxxxx()'

linux下C與C++混合程式設計

一個基於COM元件的Matlab與C#混合程式設計例項

keras上手之：與tensorflow混合程式設計

Qt5.8 QML和C++混合程式設計的兩種方式（附帶原始碼）

彙編與C混合程式設計（6.19）

Hibernate學習之hql 與sql hql 語法詳解

Android NDK——必知必會之JNI的C++操作函式詳解和小結（三）

設計模式之代理模式 c++實現以及詳解

正則表示式之--貪婪與非貪婪模式詳解

C#Socket程式設計詳解（三）Socket程式設計

Qt Quick 之 QML 與 C++ 混合程式設計詳解

在 QML 中使用 C++ 類和物件

實現可以匯出的 C++ 類

前提條件

訊號，槽

Q_INVOKABLE 巨集

Q_ENUMS

Q_PROPERTY

註冊一個 QML 中可用的型別

註冊 QML 型別

在 QML 中匯入 C++ 註冊的型別

在 QML 中建立 C++ 匯入型別的例項

完整的 colorMaker 例項

匯出一個 C++ 物件為 QML 的屬性

註冊屬性

在 QML 中使用關聯到 C++ 物件的屬性

在 C++ 中使用 QML 物件

查詢一個物件的孩子

使用元物件呼叫一個物件的方法

callQml 示例

相關推薦