RTY 實踐出真知

本文適合于對Qt Quick有基本了解的讀者。首先回答一個比較常會被問到的問題：什么是QML，它與Quick的關系是什么？

Qt Quick是Qt User Interface Creation Kit的縮寫，而QML是Qt Quick最重要的組成部分，Qt Quick結合了如下技術：

組件集合，其中大部分是關于圖形界面的

基于JavaScript陳述性語言：QML （Qt Meta-Object Language的縮寫）

用于管理組件并與組件交互的C++ API - QtDeclarative模塊

言歸正傳：通過Qt Creator，我們可以輕松生成一個Qt Quick的應用工程，從而為QML生成應用程序框架。具體操作詳見：創建qt quick (qml) 應用程序。

C++與QML的交互是通過注冊C++對象給QML環境得以實現的：

在C++實現中，非可視化的型別均為QObject的子類，可視化的類型均為QDeclarativeItem的子類。注意：QDeclarativeItem等同于QML的Item類。

如果用戶想要定義自己的型別，做法如下：

在C++中，實現派生于QObject或QDeclarativeItem的子類，它是新定義item的實體對象；

在C++中，將1中實現的新item類型注冊給QML；

在QML中，導入含有1中定義的新item的模塊；

在QML中，向使用標準的item一樣使用新定義的item

現舉例說明，我們現嘗試使用用Qt C++實現的MyButton對象（如下qml代碼），它有自己的屬性、方法以及信號的handler。用法如下（它與使用其它標準的QML item一樣），所需要做的是 需要導入包含MyButton的對應模塊名稱及其版本“MyItems 1.0 ”。

//main.qml     
import Qt 4.7     
import MyItems 1.0     
Item {     
    width: 300; height: 200     
    MyButton {     
        //注意：x, y, width, height是繼承自item的屬性，無需再自定義的item中實現     
        x: 50; y: 50     
        width: 200; height: 100     
        color: "gray"   //自定義屬性     
        onMySignals:  dosth  //自定義信號mySignals     
MouseArea {     
anchors.fill: parent     
onClicked: parent.myColor()   // 調用C++定義的方法myColor     
}     
    }     
}    
//main.qml  
import Qt 4.7  
import MyItems 1.0  
Item {  
    width: 300; height: 200  
    MyButton {  
        //注意：x, y, width, height是繼承自item的屬性，無需再自定義的item中實現  
        x: 50; y: 50  
        width: 200; height: 100  
        color: "gray"   //自定義屬性  
        onMySignals:  dosth  //自定義信號mySignals  
MouseArea {  
anchors.fill: parent  
onClicked: parent.myColor()   // 調用C++定義的方法myColor  
}  
    }  
}  

為了能夠上述qml代碼工作，需要為在Qt C++代碼中注冊MyButton及其所屬的模塊，對應的main.cpp代碼如下：

#include <QtGui/QApplication>     
#include "qmlapplicationviewer.h"     
int main(int argc, char *argv[])     
{     
    QApplication app(argc, argv);     
    QmlApplicationViewer viewer;     
    // MyButtonItem是與QML中MyButton相對應的C++實現的類名稱     
    // 1，0是版本信息；MyItems是MyButton所屬的模塊名稱     
    qmlRegisterType<MyButtonItem>("MyItems", 1, 0, "MyButton ");     
    viewer.setOrientation(QmlApplicationViewer::Auto);     
    viewer.setMainQmlFile(QLatin1String("qml/untitled/main.qml"));     
    viewer.show();     
    return app.exec();     
}    
#include <QtGui/QApplication> 
#include "qmlapplicationviewer.h"  
int main(int argc, char *argv[])  
{  
    QApplication app(argc, argv);  
    QmlApplicationViewer viewer;  
    // MyButtonItem是與QML中MyButton相對應的C++實現的類名稱  
    // 1，0是版本信息；MyItems是MyButton所屬的模塊名稱  
    qmlRegisterType<MyButtonItem>("MyItems", 1, 0, "MyButton ");  
    viewer.setOrientation(QmlApplicationViewer::Auto);  
    viewer.setMainQmlFile(QLatin1String("qml/untitled/main.qml"));  
    viewer.show();  
    return app.exec();  
}  

上面我們在QML中MyButton對象，有自己的屬性、方法以及信號的handler，其實現均來自Qt C++。Qt C++需要作以下工作：首先要定義 QML中MyButton相對應的C++實現MyButtonItem，它必須繼承自QDeclarativeItem

為了讓MyButton對象能夠使用其Color屬性，MyButtonItem類需要利用QT的PROPERTY系統，為Moc聲明其屬性

為了讓MyButton對象能夠使用其myColor方法，MyButtonItem類需要聲明該方法，并標記為Q_INVOKABLE （另外一種解決方案是將myColor聲明為槽。

為了讓MyButton對象能夠接受到C++所emit的信號，并在onMySignals，MyButtonItem類需要聲明mySignals信號

class MyButtonItem : public QDeclarativeItem     
{     
    Q_OBJECT     
    Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged)     
signals:     
    void colorChanged();     
    void mySignals();     
public:     
    MyButtonItem(QDeclarativeItem *parent = 0);     
    void paint(QPainter *painter, const QStyleOptionGraphicsItem *option,     
               QWidget *widget = 0);     
public:     
    const QColor &color() const;     
    void setColor(const QColor &newColor);     
    Q_INVOKABLE QColor myColor() const;     
// Alternatives for myColor to be called from QML     
//public slots     
    //QColor myColor() const;     
private:     
    QColor m_color;     
}; 

原始作者地址http://blog.csdn.net/changsheng230

小結：關于詳解QML與C++混合編程使用的內容介紹完了，希望本文對你有所幫助！