Qt Quick 技術(shù)的引入,使得你能夠快速構(gòu)建 UI ,具有動畫、各種絢麗效果的 UI 都不在話下。但它不是萬能的,也有很多局限性,原來 Qt 的一些技術(shù),比如低階的網(wǎng)絡(luò)編程如 QTcpSocket ,多線程,又如 XML 文檔處理類庫 QXmlStreamReader / QXmlStreamWriter 等等,在 QML 中要么不可用,要么用起來不方便,所以呢,很多時候我們是會基于這樣的原則來混合使用 QML 和 C++: QML 構(gòu)建界面, C++ 實現(xiàn)非界面的業(yè)務(wù)邏輯和復(fù)雜運算。
版權(quán)所有 foruok ,轉(zhuǎn)載請注明出處:http://blog.csdn.net/foruok 。
那這篇呢,我們就來看看 QML 和 C++ 之間如何交互。
其實話說回來, QML 的很多基本類型原本就是在 C++ 中實現(xiàn)的,比如 Item 對應(yīng) QQuickItem , Image 對應(yīng) QQuickImage , Text 對應(yīng) QQuickText ,……這樣看來,在 QML 中訪問 C++ 對象必然不成問題。然也!反過來,在 C++ 中其實也可以使用 QML 對象。
對于這兩種情景,我們分別講述。先看如何在 QML 中使用 C++ 類和對象。
首先我們需要創(chuàng)建一個 Qt Quick App ,請參考《Qt Quick 之 Hello World 圖文詳解》建立一個名為 colorMaker 的項目,接下來我們的學(xué)習(xí)將會伴隨 colorMaker 項目進(jìn)行,等我們講完,一個完整的 colorMaker 項目也會完成。需要新建兩個文件, colorMaker.h 和 colorMaker.cpp 。
colorMaker 只是一個示例項目,我在 C++ 中實現(xiàn)一個 ColorMaker 類,它可以被注冊為一個 QML 類型供 QML 像內(nèi)建類型一樣使用,它的實例也可以導(dǎo)出為 QML 上下文屬性在 QML 中訪問。我們的示例只是在界面頂部顯示當(dāng)前時間(時間文字的顏色隨時間變化而變化),在界面中間顯示一個變色矩形,在界面底部放置幾個按鈕來控制顏色如何變化。
圖 1 是效果圖:

圖 1 colorMaker 效果圖
在 QML 中使用 C++ 類和對象
我們知道, QML 其實是對 JavaScript 的擴(kuò)展,融合了 Qt Object 系統(tǒng),它是一種新的解釋型的語言, QML 引擎雖然由 Qt C++ 實現(xiàn),但 QML 對象的運行環(huán)境,說到底和 C++ 對象的上下文環(huán)境是不同的,是平行的兩個世界。如果你想在 QML 中訪問 C++ 對象,那么必然要找到一種途徑來在兩個運行環(huán)境之間建立溝通橋梁。
Qt 提供了兩種在 QML 環(huán)境中使用 C++ 對象的方式:
- 在 C++ 中實現(xiàn)一個類,注冊到 QML 環(huán)境中, QML 環(huán)境中使用該類型創(chuàng)建對象
- 在 C++ 中構(gòu)造一個對象,將這個對象設(shè)置為 QML 的上下文屬性,在 QML 環(huán)境中直接使用改屬性
不管哪種方式,對要導(dǎo)出的 C++ 類都有要求,不是一個類的所有方法、變量都可以被 QML 使用,因此我們先來看看怎樣讓一個方法或?qū)傩钥梢员?QML 使用。
實現(xiàn)可以導(dǎo)出的 C++ 類
前提條件
要想將一個類或?qū)ο髮?dǎo)出到 QML 中,下列前提條件必須滿足:
- 從 QObject 或 QObject 的派生類繼承
- 使用 Q_OBJECT 宏
看起來好像和使用信號與槽的前提條件一樣……沒錯,的確是一樣的。這兩個條件是為了讓一個類能夠進(jìn)入 Qt 強(qiáng)大的元對象系統(tǒng)(meta-object system)中,只有使用元對象系統(tǒng),一個類的某些方法或?qū)傩圆趴赡芡ㄟ^字符串形式的名字來調(diào)用,才具有了在 QML 中訪問的基礎(chǔ)條件。
一旦你導(dǎo)出了一個類,在 QML 中就必然要訪問該類的實例的屬性或方法來達(dá)到某種目的,否則我真想不來你要干什么……而具有什么特征的屬性或方法才可以被 QML 訪問呢?
信號,槽
只要是信號或者槽,都可以在 QML 中訪問,你可以把 C++ 對象的信號連接到 QML 中定義的方法上,也可以把 QML 對象的信號連接到 C++ 對象的槽上,還可以直接調(diào)用 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 宏
在定義一個類的成員函數(shù)時使用 Q_INVOKABLE 宏來修飾,就可以讓該方法被元對象系統(tǒng)調(diào)用。這個宏必須放在返回類型前面。
我給 ColorMaker 添加了兩個使用 Q_INVOKABLE 宏修飾的方法,現(xiàn)在 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 將某個方法注冊到元對象系統(tǒng)中,在 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());
- }
我在根元素創(chuàng)建完成時初始化 colorMaker 對象,給它設(shè)定了顏色生成算法,同時改變界面上切換顏色生成算法的按鈕的文字。
Q_ENUMS
如果你要導(dǎo)出的類定義了想在 QML 中使用枚舉類型,可以使用 Q_ENUMS 宏將該枚舉注冊到元對象系統(tǒng)中。
ColorMaker 類定義了 GenerateAlgorithm 枚舉類型,支持 RandomRGB / RandomRed 等顏色生成算法?,F(xiàn)在 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 ,上節(jié)展示的 QML 代碼片段已經(jīng)使用了導(dǎo)出的枚舉類型。
Q_PROPERTY
Q_PROPERTY 宏用來定義可通過元對象系統(tǒng)訪問的屬性,通過它定義的屬性,可以在 QML 中訪問、修改,也可以在屬性變化時發(fā)射特定的信號。要想使用 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])
是不是很復(fù)雜?你可以為一個屬性命名,可以設(shè)定的選項數(shù)超過10個……我是覺得有點兒頭疼。不過,不是所有的選項都必須設(shè)定,看一個最簡短的屬性聲明:
上面的聲明定義了一個類型為 int 名為 x 的屬性,通過方法 x() 來訪問。
type name 這兩個字段想必不用細(xì)說了吧? type 是屬性的類型,可以是 int / float / QString / QObject / QColor / QFont 等等, name 就是屬性的名字。
其實我們在實際使用中,很少能夠用全 Q_PROPERTY 的所有選項,就往 QML 導(dǎo)出類這種場景來說,比較常用的是 READ / WRITE / NOTIFY 三個選項。我們來看看都是什么含義。
- READ 標(biāo)記,如果你沒有為屬性指定 MEMBER 標(biāo)記,則 READ 標(biāo)記必不可少;聲明一個讀取屬性的函數(shù),該函數(shù)一般沒有參數(shù),返回定義的屬性。
- WRITE 標(biāo)記,可選配置。聲明一個設(shè)定屬性的函數(shù)。它指定的函數(shù),只能有一個與屬性類型匹配的參數(shù),必須返回 void 。
- NOTIFY 標(biāo)記,可選配置。給屬性關(guān)聯(lián)一個信號(該信號必須是已經(jīng)在類中聲明過的),當(dāng)屬性的值發(fā)生變化時就會觸發(fā)該信號。信號的參數(shù),一般就是你定義的屬性。
其它標(biāo)記的含義,請參考 Qt SDK 。
QML 中的 Text 類型對應(yīng) 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);
- ...
- };
現(xiàn)在給我們的 ColorMaker 類添加一些屬性,以便 QML 可以獲取、設(shè)置顏色值。新的 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;
- };
現(xiàn)在我們的 ColorMaker 已經(jīng)是一個完整的類了,有信號、有槽、有使用 Q_INVOKABLE 注冊的方法,還導(dǎo)出了枚舉類型,小小麻雀五臟俱全。
是時候看看它的實現(xiàn)了。翠花,上代碼:
- #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 的定時器來產(chǎn)生顏色,定時器觸發(fā)時根據(jù)算法來構(gòu)造新的顏色值,發(fā)射 colorChanged 信號,同時也發(fā)送一個 currentTime 信號。
注冊一個 QML 中可用的類型
看過了怎樣實現(xiàn)一個可供 QML 訪問的類,這節(jié)我們看看怎樣將一個 C++ 類型注冊為 QML 類型以及怎樣在 QML 中使用這個類型。
要達(dá)到這種目的,大概可以分四步:
- 實現(xiàn) C++ 類
- 注冊 QML 類型
- 在 QML 中導(dǎo)入類型
- 在 QML 創(chuàng)建由 C++ 導(dǎo)出的類型的實例并使用
ColorMaker 已經(jīng)就緒了,現(xiàn)在看看怎樣將其注冊為 QML 可以使用的類型。
注冊 QML 類型
要注冊一個 QML 類型,有多種方法可用,如 qmlRegisterSingletonType() 用來注冊一個單例類型, qmlRegisterType() 注冊一個非單例的類型, qmlRegisterTypeNotAvailable() 注冊一個類型用來占位, qmlRegisterUncreatableType() 通常用來注冊一個具有附加屬性的附加類型,……好吧,我這里只說常規(guī)的類型注冊,其它的,請您參考 Qt SDK 吧。
qmlRegisterType() 是個模板函數(shù),有兩個原型:
- 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 的類型和版本機(jī)制,三言兩語不能盡述,咱們單說前一個原型的使用。要使用 qmlRegisterType 需要包含 QtQml 頭文件。
先說模板參數(shù) typename ,它就是你實現(xiàn)的 C++ 類的類名。
qmlRegisterType() 的第一個參數(shù) uri ,讓你指定一個唯一的包名,類似 Java 中的那種,一是用來避免名字沖突,而是可以把多個相關(guān)類聚合到一個包中方便引用。比如我們常寫這個語句 "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 上下文創(chuàng)建之前,否則的話,木有用滴。
在 QML 中導(dǎo)入 C++ 注冊的類型
一旦你在 C++ 中注冊好了 QML 類型,就可以在 QML 文檔中引入你注冊的包,然后使用注冊的類型。要引入包,使用 import 語句。比如要使用我們注冊的 ColorMaker 類,可以在 QML 文檔中加入下面的 import 語句:
- import an.qt.ColorMaker 1.0
在 QML 中創(chuàng)建 C++ 導(dǎo)入類型的實例
引入包后,你就可以在 QML 中創(chuàng)建 C++ 導(dǎo)入類型的對象了,與 QML 內(nèi)建類型的使用完全一樣。如下是創(chuàng)建一個 ColorMaker 實例的代碼:
- Rectangle {
- width: 360;
- height: 360;
-
- ColorMaker {
- id: colorMaker;
- color: Qt.green;
- }
- }
如你所見,ColorMaker 的使用與 Retangle 沒什么區(qū)別。如果你想在別處引用 ColorMaker 的實例,可以給實例指定一個唯一的 id ,就像上面的代碼中那樣。
完整的 colorMaker 實例
如何定義一個可以導(dǎo)出到 QML 中的 C++ 類、如何注冊 QML 類型、如何在 QML 中使用 C++ 導(dǎo)出的類型,都介紹完了,現(xiàn)在來看看完整的 colorMaker 。
C++ 代碼前面都展示過了,這里看下完整的 main.qml 文檔:
main.qml 的界面分成了三部分,參看圖 1 。頂部是一個 Text ,用來顯示由 ColorMaker 提供的時間,我使用 Connections 對象,指定 target 為 colorMaker ,在 onCurrentTime 信號處理器中改變 timeLabel 的文本和顏色。這里使用 ColorMaker 的 timeColor 屬性,該屬性的讀取函數(shù)是 timeColor ,回看一下 colorMaker.cpp 中的實現(xiàn):
- 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() 函數(shù)獲取當(dāng)前時間,取時、分、秒轉(zhuǎn)換為 R 、 G 、 B 值,構(gòu)造一個 QColor 對象。
我構(gòu)造了ColorMaker 類的一個實例, id 為 colorMaker ,初始化顏色值為 green 。
colorMaker 實例界面的中間是一個 Rectangle 對象,id 是 colorRect 。我使用 Connections 對象,指定 target 為 colorMaker ,在 onColorChanged 信號處理器中改變 colorRect 的顏色。
界面的底部就是幾個按鈕,使用錨布局把它們排成一行。 start 按鈕的 onClicked 信號處理器調(diào)用 colorMaker 的 start() 槽,啟動顏色生成器。 stop 按鈕的 onClicked 信號處理器調(diào)用 colorMaker 的 stop() 槽,停止顏色生成器。而 colorAlgorithm 按鈕則每點擊一次就切換一個顏色生成算法,同時調(diào)用 changeAlgorithm() 函數(shù),根據(jù)算法改變按鈕上的文字。 quit 按鈕一點就退出應(yīng)用。
main.qml 還引入了一個新內(nèi)容:定義函數(shù)。這個可以參考 JavaScript 的教程。我們定義的 changeAlgorithm 函數(shù),接受兩個參數(shù), button 和 algorithm 。如果你是 C++ 程序猿,可能有點兒不適應(yīng):怎么參數(shù)就木有類型呢哈…… JavaScript 就是醬紫滴,擁有動態(tài)類型,一個變量在賦值時決定其類型。
這就是 colorMaker 的全部了。
好啦,現(xiàn)在再來看看怎樣導(dǎo)出一個對象到 QML 中。
導(dǎo)出一個 C++ 對象為 QML 的屬性
上面看了怎樣導(dǎo)出一個 QML 類型在 QML 文檔中使用,你還可以把 C++ 中創(chuàng)建的對象作為屬性傳遞到 QML 環(huán)境中,然后在 QML 環(huán)境中訪問。我們還是以 colorMaker 為例,對其代碼做適當(dāng)修改來適應(yīng)本節(jié)的內(nèi)容。
注冊屬性
要將一個對象注冊為屬性很簡單,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() 方法可以為該上下文設(shè)置一個全局可見的屬性。要注意的是,你 new 出來的對象, QQmlContext 只是使用,不會幫你刪除,你需要自己找一個合適的時機(jī)來刪除它。
還有一點要說明,因為我們?nèi)サ袅?qmlRegisterType() 調(diào)用,所以在 main.qml 中不能再訪問 ColorMaker 類了,比如你不能通過類名來引用它定義的 GenerateAlgorithm 枚舉類型, colorMaker.setAlgorithm(ColorMaker.LinearIncrease) 語句會導(dǎo)致下面的報錯:
- ReferenceError: ColorMaker is not defined
現(xiàn)在來看如何在 QML 中使用我們導(dǎo)出的屬性
在 QML 中使用關(guān)聯(lián)到 C++ 對象的屬性
一旦調(diào)用 setContextProperty() 導(dǎo)出了屬性,就可以在 QML 中使用了,不需要 import 語句哦。下面是 main.qml 修改后的代碼:
main.qml 代碼主要修改了三處,我已經(jīng)使用方括號標(biāo)注出來了。因為我將導(dǎo)出的屬性命名為 colorMaker ,和導(dǎo)出 ColorMaker 類時構(gòu)造的實例的 id 一樣,所以改動少了些。
你看到了,導(dǎo)出的屬性可以直接使用,與屬性關(guān)聯(lián)的對象,它的信號、槽、可調(diào)用方法(使用 Q_INVOKABLE 宏修飾的方法)、屬性都可以使用,只是不能通過類名來引用枚舉值了。
在 C++ 中使用 QML 對象
看過了如何在 QML 中使用 C++ 類型或?qū)ο?,現(xiàn)在來看如何在 C++ 中使用 QML 對象。
我們可以使用 QML 對象的信號、槽,訪問它們的屬性,都沒有問題,因為很多 QML 對象對應(yīng)的類型,原本就是 C++ 類型,比如 Image 對應(yīng) QQuickImage , Text 對應(yīng) QQuickText……但是,這些與 QML 類型對應(yīng)的 C++ 類型都是私有的,你寫的 C++ 代碼也不能直接訪問。腫么辦?
Qt 最核心的一個基礎(chǔ)特性,就是元對象系統(tǒng),通過元對象系統(tǒng),你可以查詢 QObject 的某個派生類的類名、有哪些信號、槽、屬性、可調(diào)用方法等等信息,然后也可以使用 QMetaObject::invokeMethod() 調(diào)用 QObject 的某個注冊到元對象系統(tǒng)中的方法。而對于使用 Q_PROPERTY 定義的屬性,可以使用 QObject 的 property() 方法訪問屬性,如果該屬性定義了 WRITE 方法,還可以使用 setProperty() 修改屬性。所以只要我們找到 QML 環(huán)境中的某個對象,就可以通過元對象系統(tǒng)來訪問它的屬性、信號、槽等。
查找一個對象的孩子
QObject 類的構(gòu)造函數(shù)有一個 parent 參數(shù),可以指定一個對象的父親, QML 中的對象其實借助這個組成了以根 item 為父的一棵對象樹。
而 QObject 定義了一個屬性 objectName ,這個對象名字屬性,就可以用于查找對象?,F(xiàn)在該說到查找對象的方法了: findChild() 和 findChildren() 。它們的函數(shù)原型如下:
- 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;
都是模板方法,從命名上也可以看出,一個返回單個對象,一個返回對象列表。閑話少說,現(xiàn)在讓我們看看如何查詢一個或多個對象,我們先以 Qt Widgets 為例來說明用法哈。
示例 1 :
- QPushButton *button = parentWidget->findChild<QPushButton *>("button1");
查找 parentWidget 的名為 "button1" 的類型為 QPushButton 的孩子。
示例 2 :
- QList<QWidget *> widgets = parentWidget.findChildren<QWidget *>("widgetname");
返回 parentWidget 所有名為 "widgetname" 的 QWidget 類型的孩子列表。
使用元對象調(diào)用一個對象的方法
QMetaObject 的 invokeMethod() 方法用來調(diào)用一個對象的信號、槽、可調(diào)用方法。它是個靜態(tài)方法,其函數(shù)原型如下:
- 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() 函數(shù),不過都是上面這個原型的重載,所以我們只要介紹上面這個就 OK 了。
先說返回值吧,返回 true 說明調(diào)用成功。返回 false ,要么是因為沒有你說的那個方法,要么是參數(shù)類型不匹配。
第一個參數(shù)是被調(diào)用對象的指針。
第二個參數(shù)是方法名字。
第三個參數(shù)是連接類型,看到這里你就知道, invokeMethod 為信號與槽而生,你可以指定連接類型,如果你要調(diào)用的對象和發(fā)起調(diào)用的線程是同一個線程,那么可以使用 Qt::DirectConnection 或 Qt::AutoConnection 或 Qt::QueuedConnection ,如果被調(diào)用對象在另一個線程,那么建議你使用 Qt::QueuedConnection 。
第四個參數(shù)用來接收返回指。
然后就是多達(dá) 10 個可以傳遞給被調(diào)用方法的參數(shù)。嗯,看來信號與槽的參數(shù)個數(shù)是有限制的,不能超過 10 個。
對于要傳遞給被調(diào)用方法的參數(shù),使用 QGenericArgument 來表示,你可以使用 Q_ARG 宏來構(gòu)造一個參數(shù),它的定義是:
- QGenericArgument Q_ARG( Type, const Type & value)
返回類型是類似的,使用 QGenericReturnArgument 表示,你可以使用 Q_RETURN_ARG 宏來構(gòu)造一個接收返回指的參數(shù),它的定義是:
- QGenericReturnArgument Q_RETURN_ARG( Type, Type & value)
好啦,總算把這個天殺的函數(shù)介紹完了,下面我們看看怎么用。
假設(shè)一個對象有這么一個槽 compute(QString, int, double) ,返回一個 QString 對象,那么你可以這么調(diào)用(同步方式):
- 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));
如果你要讓一個線程對象退出,可以這么調(diào)用(隊列連接方式):
- QMetaObject::invokeMethod(thread, "quit",
- Qt::QueuedConnection);
更多細(xì)節(jié)請參考 Qt 幫助 中的 QMetaObject 手冊。
callQml 示例
現(xiàn)在讓我們創(chuàng)建一個新的項目,名字是 callQml ,添加 changeColor.h 、 changeColor.cpp 兩個文件。 main.qml 內(nèi)容如下:
- 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++ 代碼中通過這些個名字來查找對應(yīng)的對象并改變它們。
現(xiàn)在來看看 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::from#ff0000);
- bRet = QMetaObject::invokeMethod(textLabel, "doLayout");
- qDebug() << "call doLayout return - " << bRet;
- }
-
- return app.exec();
- }
在一開始我通過 viewer.rootObject() ,獲取到了作為根元素的 Rectangle ,然后把它交給一個 ChangeQmlColor 對象,該對象會內(nèi)部通過一個定時器,一秒改變一次傳入對象的顏色。
緊接著,我使用 QObject 的 findChild() 找到了 quitButton 按鈕,把它的 clicked() 信號連接到 QGuiApplication 的 quit() 槽上。所以你點擊這個按鈕,應(yīng)用就退出了。
后來,我又通過名字 "textLabel" 找到了 textLabel 對象。首先我企圖使用 invodeMethod() 調(diào)用 setText() 方法來改變 textLabel 的文本,這個注定是會失敗的,因為 QML 中的Text 對象對應(yīng) C++ QQuickText 類,而 QQuickText 沒有名為 setText 的槽或者可調(diào)用方法。我查看了頭文件 qquicktext_p.h ,發(fā)現(xiàn)它有一個使用 Q_INVOKABLE 宏修飾的 doLayout() 的方法,所以后來我又調(diào)用 doLayout() ,這次成功了。
圖 2 是運行效果:
圖 2 callQml 運行效果圖
Hello World 這行字變成了紅色,是因為我在 main() 函數(shù)中使用 setProperty 修改了 textLabel 的 color 屬性。
下面是 Qt Creator 應(yīng)用程序輸出窗口的信息,可以驗證對 Text 方法的調(diào)用是否成功:
- 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 為參數(shù)創(chuàng)建了一個 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
實現(xiàn)文件 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);
- }
很簡單,不說啦。