2. 程式人生 > >Qt Quick 之 QML 與 C++ 混合編程具體解釋

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

阿新 • • 發佈：2017-06-29
ack world 避免 pub start 模板方法 另一個 一秒 gis

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 是效果圖：

技術分享

圖 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 是執行效果：技術分享

圖 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 語言基礎
  • Qt Quick 之 Hello World 圖文具體解釋
  • Qt Quick 簡單教程
  • Qt Quick 事件處理之信號與槽
  • Qt Quick事件處理之鼠標、鍵盤、定時器
  • Qt Quick 事件處理之捏拉縮放與旋轉
  • Qt Quick 組件與對象動態創建具體解釋
  • Qt Quick 布局介紹



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

相關推薦

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

ack world 避免 pub start 模板方法 另一個 一秒 gis Qt Quick 技術的引入。使得你能夠高速構建 UI ，具有動畫、各種絢麗效果的 UI 都不在話下。但它不是萬能的。也有非常多局限性，原來 Qt 的一些技術，比方低階的網絡編程如 Q

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

    Qt Quick 技術的引入，使得你能夠快速構建 UI ，具有動畫、各種絢麗效果的 UI 都不在話下。但它不是萬能的，也有很多侷限性，原來 Qt 的一些技術，比如低階的網路程式設計如 QTcpSocket ，多執行緒，又如 XML 文件處理類庫 QXmlStreamR

QML與C++混合程式設計

文章參考： https://blog.csdn.net/foruok/article/details/32698603 http://blog.51cto.com/9291927/1975383 QT專案開發過程中，畫面上顯示的佈局以及對應的資料可能會動態變化，如果只用QML來構件簡單的

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

    從Qt5後，引入了QML，以前一直用C++開發，現在看了看QML，以啃官方文件為主，將學習心得記錄下來。    QML 與 C++ 互動主要用到了一個註冊函式 qmlRegisterType ，函式原型如下：   template<typename T>

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

QML獲得C++類中的屬性   QML可以輕鬆地用C++中定義的功能進行擴充套件。由於QML引擎和Qt元物件系統的緊密結合，QML可以獲取任意QObject派生類中的功能，這使得QML可以通過一些小的改動直接獲得C++中的資料和方法。   QML引擎可以通過

Swift和Objective-C混合編程——Swift調用OC

分享 發現 load 另一個 == 方法 代碼 swift 應用 在iOS應用的開發中。Swift必將代替OC，兩者的趨勢是“短期共存，長期代替”。但曾經有太多的代碼是用OC語言完畢的，而Swift的開發也從 OC中繼承了非常多的特性。兩者也是有非常多的類

matlab與vs混合編程/matlab移植

依賴 操作 redist cout 思想 輸入 編輯 col 軟件 前言 項目算法中包含了不同編譯工具的代碼，分別是matlab和VS，需要將二者結合起來，統一在同一個系統工作，此時就要用到matlab和vs混合編程。 在matlab中將.m文件編譯生成庫文件等供外部的

Swift 4 和 Objective-C 混合編程（一） 快速起步

命名方式 import 編譯器 選擇性 工程 Swift 4 和 Objective-C 在同一個工程裏的混搭編程的方法你可以在 xcode 裏同時使用 Swift 和 Objective-C（以下簡稱OC）來寫代碼，混搭編程的好處很多，比如允許大量代碼的復用，在性能和開發效率之間找到平衡

C語言編程之--scanf()函數與getchar()函數搭配來理解C程序的輸入緩存(buffer)

使用 ges border urn alt color 數值 amp tps 博主最近在學習C語言編程，在書中的代碼示例中出現了下面的代碼段： #include<stdio.h> int main() { char a[5]; int i; printf("

win下vs用c++與匯編混合編程環境配置

asmwin下vs用c++與匯編混合編程環境配置

編程語言吐槽之Java與C

編程語言 用途 評價 語言 計算 競爭力 理念 部署 direct 包含各種偏見和武斷，請謹慎閱讀。 為什麽在學校學習的C，拿到企業生產中不起作用？ 而為什麽企業級的程序員，依然對C/C++無法掌控？在算法各方面不夠精湛？ 根本原因還是應用場景的不同。企業級的開發

c++--模板與泛型編程

編譯 string std size_t har rom 數組大小 傳遞 成員函數 一、定義模板 1.1 函數模板 1. 適用情況：如果兩個函數幾乎是相同的，唯一的差異是參數的類型，函數體則完全一樣。 2. 定義 template <模板參數列表(以逗號分隔)&g

Matalb與C混編時矩陣無法傳到編譯好的mex文件

read www .html matalb tps 1-1 https mex文件 sca %E8%AF%B7%E9%97%AE%E6%88%91%E5%86%99%E7%9A%84%E8%BF%99%E4%B8%AA%E8%87%AA%E5%8A%A8%E7%94%9F%

讀書筆記 ~ Python黑帽子 黑客與滲透測試編程之道

alt nbsp too 管理 return cps 工具 transfer args Python黑帽子 黑客與滲透測試編程之道 <<< 持續更新中>>> 第一章： 設置python 環境 1、python軟件包管理工具安裝

Qt Quick之StackView具體解釋（1）

left 記錄 內部 變化 原創 focus filo 郵箱 sta Qt Quick中有個StackView。我在《Qt Quick核心編程》一書中沒有講到。近期有人問起，趁機學習了一下，把它的基本使用方法記錄下來。 我準備分兩次來講。第一次講主要的

C++圖形編程之graphics.h頭文件

提示安裝 load -1 圖形 ges com target div blank 　　graphics.h是Turbo C的針對DOS下的一個C語言圖形庫，如果要用的話應該用TC的編譯器來編譯，但是如果需要在vc及vs環境中使用graphics.h的功能，則可以選擇下載Ea

Boolan C++ STL與泛型編程 二

push_back 使用 功能 lan 鏈表排序 移動元素 直接 雙向鏈表 末尾 本周主要是講解了容器list的使用 List是一種可在常數時間內在任何位置執行插入和刪除操作的順序容器。list是雙向鏈表，其叠代器是雙向的。與其他順序容器(array, vector, d

C++/CLI混合編程<Hid示例>

erl rep idp fault over broadcast image patch found 異步IO，支持拔插事件 HidCore 1 #pragma once 2 #include "stdafx.h" 3 #include "HidEvent.h"

c++和cuda混合編程 實現傳統神經網絡

fin ice 很慢 break 運行時 txt ads pre gsp 直接放代碼了。。。 實現的是x1+x2=y的預測，但梯度下降很慢。。。233333，gpu運行時間很快！！ // // main.cpp // bp // // Created by jzc

【C++ Primer 第16章】《模板與泛型編程》目錄

cnblogs OS pan c++ get In lan microsoft .cn 模板與泛型編程 • 定義模板（16.1） 類模板（16.1.2） 類前置聲明範例 •【C