版權聲明:本文爲博主原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處連接和本聲明。
本文連接:https://blog.csdn.net/foruok/article/details/32698603
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++ 類和對象。app
首先咱們須要建立一個 Qt Quick App ,請參考《Qt Quick 之 Hello World 圖文詳解》創建一個名爲 colorMaker 的項目,接下來咱們的學習將會伴隨 colorMaker 項目進行,等咱們講完,一個完整的 colorMaker 項目也會完成。須要新建兩個文件, colorMaker.h 和 colorMaker.cpp 。dom
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);
}
很簡單,不說啦。
版權全部 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 佈局介紹
———————————————— 版權聲明:本文爲CSDN博主「foruok」的原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處連接及本聲明。 原文連接:https://blog.csdn.net/foruok/article/details/32698603