• <ins id="pjuwb"></ins>
    <blockquote id="pjuwb"><pre id="pjuwb"></pre></blockquote>

    <noscript id="pjuwb"></noscript>
          <sup id="pjuwb"><pre id="pjuwb"></pre></sup>

            <dd id="pjuwb"></dd>
            <abbr id="pjuwb"></abbr>
            

    
            

            




            







												


        


            


            

            

            




            
	
					
	
            
		
            
			Qt Quick 之 QML 與 C++ 混合編程詳解
		
            
		
            http://blog.csdn.net/foruok/article/details/32698603

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

                           圖 1 colorMaker 效果圖
            在 QML 中使用 C++ 類和對(duì)象
                我們知道， QML 其實(shí)是對(duì) JavaScript 的擴(kuò)展，融合了 Qt Object 系統(tǒng)，它是一種新的解釋型的語(yǔ)言， QML 引擎雖然由 Qt C++ 實(shí)現(xiàn)，但 QML 對(duì)象的運(yùn)行環(huán)境，說(shuō)到底和 C++ 對(duì)象的上下文環(huán)境是不同的，是平行的兩個(gè)世界。如果你想在 QML 中訪問(wèn) C++ 對(duì)象，那么必然要找到一種途徑來(lái)在兩個(gè)運(yùn)行環(huán)境之間建立溝通橋梁。
                Qt 提供了兩種在 QML 環(huán)境中使用 C++ 對(duì)象的方式：
             
            1. 在 C++ 中實(shí)現(xiàn)一個(gè)類，注冊(cè)到 QML 環(huán)境中， QML 環(huán)境中使用該類型創(chuàng)建對(duì)象
            2. 在 C++ 中構(gòu)造一個(gè)對(duì)象，將這個(gè)對(duì)象設(shè)置為 QML 的上下文屬性，在 QML 環(huán)境中直接使用改屬性
             
                不管哪種方式，對(duì)要導(dǎo)出的 C++ 類都有要求，不是一個(gè)類的所有方法、變量都可以被 QML 使用，因此我們先來(lái)看看怎樣讓一個(gè)方法或?qū)傩钥梢员?QML 使用。
            實(shí)現(xiàn)可以導(dǎo)出的 C++ 類
            前提條件   
                 要想將一個(gè)類或?qū)ο髮?dǎo)出到 QML 中，下列前提條件必須滿足：
            •     從 QObject 或 QObject 的派生類繼承
            •     使用 Q_OBJECT 宏
                看起來(lái)好像和使用信號(hào)與槽的前提條件一樣……沒(méi)錯(cuò)，的確是一樣的。這兩個(gè)條件是為了讓一個(gè)類能夠進(jìn)入 Qt 強(qiáng)大的元對(duì)象系統(tǒng)（meta-object system）中，只有使用元對(duì)象系統(tǒng)，一個(gè)類的某些方法或?qū)傩圆趴赡芡ㄟ^(guò)字符串形式的名字來(lái)調(diào)用，才具有了在 QML 中訪問(wèn)的基礎(chǔ)條件。
                一旦你導(dǎo)出了一個(gè)類，在 QML 中就必然要訪問(wèn)該類的實(shí)例的屬性或方法來(lái)達(dá)到某種目的，否則我真想不來(lái)你要干什么……而具有什么特征的屬性或方法才可以被 QML 訪問(wèn)呢？
            信號(hào)，槽
                只要是信號(hào)或者槽，都可以在 QML 中訪問(wèn)，你可以把 C++ 對(duì)象的信號(hào)連接到 QML 中定義的方法上，也可以把 QML 對(duì)象的信號(hào)連接到 C++ 對(duì)象的槽上，還可以直接調(diào)用 C++ 對(duì)象的槽或信號(hào)……所以，這是最簡(jiǎn)單好用的一種途徑。
                下面初始 ColorMaker 類的聲明：
            1. class ColorMaker : public QObject  
            2. {  
            3.     Q_OBJECT  
            4.   
            5. public:  
            6.     ColorMaker(QObject *parent = 0);  
            7.     ~ColorMaker();  
            8.       
            9. signals:  
            10.     void colorChanged(const QColor & color);  
            11.     void currentTime(const QString &strTime);  
            12.   
            13. public slots:  
            14.     void start();  
            15.     void stop();  
            16.       
            17. };  

                我們定義了 start() / stop() 兩個(gè)槽， colorChanged() / currentTime() 兩個(gè)信號(hào)，都可以在 QML 中使用。
            Q_INVOKABLE 宏
                在定義一個(gè)類的成員函數(shù)時(shí)使用 Q_INVOKABLE 宏來(lái)修飾，就可以讓該方法被元對(duì)象系統(tǒng)調(diào)用。這個(gè)宏必須放在返回類型前面。
                我給 ColorMaker 添加了兩個(gè)使用 Q_INVOKABLE 宏修飾的方法，現(xiàn)在 ColorMaker 類的聲明變成了這個(gè)樣子：
            1. class ColorMaker : public QObject  
            2. {  
            3.     Q_OBJECT  
            4.   
            5. public:  
            6.     ColorMaker(QObject *parent = 0);  
            7.     ~ColorMaker();  
            8.       
            9.     Q_INVOKABLE GenerateAlgorithm algorithm() const;  
            10.     Q_INVOKABLE void setAlgorithm(GenerateAlgorithm algorithm);  
            11.   
            12. signals:  
            13.     void colorChanged(const QColor & color);  
            14.     void currentTime(const QString &strTime);  
            15.   
            16. public slots:  
            17.     void start();  
            18.     void stop();  
            19. };  

                一旦你使用 Q_INVOKABLE 將某個(gè)方法注冊(cè)到元對(duì)象系統(tǒng)中，在 QML 中就可以用 ${Object}.${method} 來(lái)訪問(wèn)，colorMaker 的 main.qml 中有使用 algorithm() 和 setAlgorithm() 的 QML 代碼 ：
                
            [javascript] view plain copy
            1. Component.onCompleted: {  
            2.     colorMaker.color = Qt.rgba(0,180,120, 255);  
            3.     colorMaker.setAlgorithm(ColorMaker.LinearIncrease);  
            4.     changeAlgorithm(colorAlgorithm, colorMaker.algorithm());  
            5. }  
                我在根元素創(chuàng)建完成時(shí)初始化 colorMaker 對(duì)象，給它設(shè)定了顏色生成算法，同時(shí)改變界面上切換顏色生成算法的按鈕的文字。
            Q_ENUMS
                如果你要導(dǎo)出的類定義了想在 QML 中使用枚舉類型，可以使用 Q_ENUMS 宏將該枚舉注冊(cè)到元對(duì)象系統(tǒng)中。
                ColorMaker 類定義了 GenerateAlgorithm 枚舉類型，支持 RandomRGB / RandomRed 等顏色生成算法。現(xiàn)在 ColorMaker 類的聲明變成了這個(gè)樣子：
            1. class ColorMaker : public QObject  
            2. {  
            3.     Q_OBJECT  
            4.     Q_ENUMS(GenerateAlgorithm)  
            5.   
            6. public:  
            7.     ColorMaker(QObject *parent = 0);  
            8.     ~ColorMaker();  
            9.       
            10.     enum GenerateAlgorithm{  
            11.         RandomRGB,  
            12.         RandomRed,  
            13.         RandomGreen,  
            14.         RandomBlue,  
            15.         LinearIncrease  
            16.     };  
            17.       
            18.     Q_INVOKABLE GenerateAlgorithm algorithm() const;  
            19.     Q_INVOKABLE void setAlgorithm(GenerateAlgorithm algorithm);  
            20.   
            21. signals:  
            22.     void colorChanged(const QColor & color);  
            23.     void currentTime(const QString &strTime);  
            24.   
            25. public slots:  
            26.     void start();  
            27.     void stop();  
            28. };  

                一旦你使用 Q_ENUMS 宏注冊(cè)了你的枚舉類型，在 QML 中就可以用 ${CLASS_NAME}.${ENUM_VALUE} 的形式來(lái)訪問(wèn)，比如 ColorMaker.LinearIncrease ，上節(jié)展示的 QML 代碼片段已經(jīng)使用了導(dǎo)出的枚舉類型。
            Q_PROPERTY
                Q_PROPERTY 宏用來(lái)定義可通過(guò)元對(duì)象系統(tǒng)訪問(wèn)的屬性，通過(guò)它定義的屬性，可以在 QML 中訪問(wèn)、修改，也可以在屬性變化時(shí)發(fā)射特定的信號(hào)。要想使用 Q_PROPERTY 宏，你的類必須是 QObject 的后裔，必須在類首使用 Q_OBJECT 宏。
                下面是 Q_PROPERTY 宏的原型：
            1. Q_PROPERTY(type name  
            2.            (READ getFunction [WRITE setFunction] |  
            3.             MEMBER memberName [(READ getFunction | WRITE setFunction)])  
            4.            [RESET resetFunction]  
            5.            [NOTIFY notifySignal]  
            6.            [REVISION int]  
            7.            [DESIGNABLE bool]  
            8.            [SCRIPTABLE bool]  
            9.            [STORED bool]  
            10.            [USER bool]  
            11.            [CONSTANT]  
            12.            [FINAL])  

                是不是很復(fù)雜？你可以為一個(gè)屬性命名，可以設(shè)定的選項(xiàng)數(shù)超過(guò)10個(gè)……我是覺(jué)得有點(diǎn)兒頭疼。不過(guò)，不是所有的選項(xiàng)都必須設(shè)定，看一個(gè)最簡(jiǎn)短的屬性聲明：
            1. Q_PROPERTY(int x READ x)  

                上面的聲明定義了一個(gè)類型為 int 名為 x 的屬性，通過(guò)方法 x() 來(lái)訪問(wèn)。
                type name 這兩個(gè)字段想必不用細(xì)說(shuō)了吧？ type 是屬性的類型，可以是 int / float / QString / QObject / QColor / QFont 等等， name 就是屬性的名字。
                其實(shí)我們?cè)趯?shí)際使用中，很少能夠用全 Q_PROPERTY 的所有選項(xiàng)，就往 QML 導(dǎo)出類這種場(chǎng)景來(lái)說(shuō)，比較常用的是 READ / WRITE / NOTIFY 三個(gè)選項(xiàng)。我們來(lái)看看都是什么含義。
            • READ 標(biāo)記，如果你沒(méi)有為屬性指定 MEMBER 標(biāo)記，則 READ 標(biāo)記必不可少；聲明一個(gè)讀取屬性的函數(shù)，該函數(shù)一般沒(méi)有參數(shù)，返回定義的屬性。
            • WRITE 標(biāo)記，可選配置。聲明一個(gè)設(shè)定屬性的函數(shù)。它指定的函數(shù)，只能有一個(gè)與屬性類型匹配的參數(shù)，必須返回 void 。
            • NOTIFY 標(biāo)記，可選配置。給屬性關(guān)聯(lián)一個(gè)信號(hào)（該信號(hào)必須是已經(jīng)在類中聲明過(guò)的），當(dāng)屬性的值發(fā)生變化時(shí)就會(huì)觸發(fā)該信號(hào)。信號(hào)的參數(shù)，一般就是你定義的屬性。
                其它標(biāo)記的含義，請(qǐng)參考 Qt SDK 。
                QML 中的 Text 類型對(duì)應(yīng) C++ 中的 QQuickText 類，下面是我摘取的部分代碼，可以看到 Q_ENUMS 和 Q_PROPERTY 的使用：
            1. class QQuickText : public QQuickImplicitSizeItem  
            2. {  
            3.     Q_OBJECT  
            4.     Q_ENUMS(HAlignment)  
            5.   
            6.   
            7.     Q_PROPERTY(QString text READ text WRITE setText NOTIFY textChanged)  
            8.     Q_PROPERTY(QFont font READ font WRITE setFont NOTIFY fontChanged)  
            9.     Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged)  
            10.     ...  
            11.       
            12. public:  
            13.     enum HAlignment { AlignLeft = Qt::AlignLeft,  
            14.                        AlignRight = Qt::AlignRight,  
            15.                        AlignHCenter = Qt::AlignHCenter,  
            16.                        AlignJustify = Qt::AlignJustify };  
            17.     ...  
            18.     QString text() const;  
            19.     void setText(const QString &);  
            20.   
            21.     QFont font() const;  
            22.     void setFont(const QFont &font);  
            23.   
            24.     QColor color() const;  
            25.     void setColor(const QColor &c);  
            26.     ...  
            27. };  
                現(xiàn)在給我們的 ColorMaker 類添加一些屬性，以便 QML 可以獲取、設(shè)置顏色值。新的 ColorMaker 類如下：
            1. class ColorMaker : public QObject  
            2. {  
            3.     Q_OBJECT  
            4.     Q_ENUMS(GenerateAlgorithm)  
            5.     Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged)  
            6.     Q_PROPERTY(QColor timeColor READ timeColor)  
            7.   
            8. public:  
            9.     ColorMaker(QObject *parent = 0);  
            10.     ~ColorMaker();  
            11.   
            12.     enum GenerateAlgorithm{  
            13.         RandomRGB,  
            14.         RandomRed,  
            15.         RandomGreen,  
            16.         RandomBlue,  
            17.         LinearIncrease  
            18.     };  
            19.   
            20.     QColor color() const;  
            21.     void setColor(const QColor & color);  
            22.     QColor timeColor() const;  
            23.   
            24.     Q_INVOKABLE GenerateAlgorithm algorithm() const;  
            25.     Q_INVOKABLE void setAlgorithm(GenerateAlgorithm algorithm);  
            26.   
            27. signals:  
            28.     void colorChanged(const QColor & color);  
            29.     void currentTime(const QString &strTime);  
            30.   
            31. public slots:  
            32.     void start();  
            33.     void stop();  
            34.   
            35. protected:  
            36.     void timerEvent(QTimerEvent *e);  
            37.   
            38. private:  
            39.     GenerateAlgorithm m_algorithm;  
            40.     QColor m_currentColor;  
            41.     int m_nColorTimer;  
            42. };  

                現(xiàn)在我們的 ColorMaker 已經(jīng)是一個(gè)完整的類了，有信號(hào)、有槽、有使用 Q_INVOKABLE 注冊(cè)的方法，還導(dǎo)出了枚舉類型，小小麻雀五臟俱全。
                是時(shí)候看看它的實(shí)現(xiàn)了。翠花，上代碼：
            1. #include "colorMaker.h"  
            2. #include <QTimerEvent>  
            3. #include <QDateTime>  
            4.   
            5. ColorMaker::ColorMaker(QObject *parent)  
            6.     : QObject(parent)  
            7.     , m_algorithm(RandomRGB)  
            8.     , m_currentColor(Qt::black)  
            9.     , m_nColorTimer(0)  
            10. {  
            11.     qsrand(QDateTime::currentDateTime().toTime_t());  
            12. }  
            13.   
            14. ColorMaker::~ColorMaker()  
            15. {  
            16. }  
            17.   
            18. QColor ColorMaker::color() const  
            19. {  
            20.     return m_currentColor;  
            21. }  
            22.   
            23. void ColorMaker::setColor(const QColor &color)  
            24. {  
            25.     m_currentColor = color;  
            26.     emit colorChanged(m_currentColor);  
            27. }  
            28.   
            29. QColor ColorMaker::timeColor() const  
            30. {  
            31.     QTime time = QTime::currentTime();  
            32.     int r = time.hour();  
            33.     int g = time.minute()*2;  
            34.     int b = time.second()*4;  
            35.     return QColor::fromRgb(r, g, b);  
            36. }  
            37.   
            38. ColorMaker::GenerateAlgorithm ColorMaker::algorithm() const  
            39. {  
            40.     return m_algorithm;  
            41. }  
            42.   
            43. void ColorMaker::setAlgorithm(GenerateAlgorithm algorithm)  
            44. {  
            45.     m_algorithm = algorithm;  
            46. }  
            47.   
            48. void ColorMaker::start()  
            49. {  
            50.     if(m_nColorTimer == 0)  
            51.     {  
            52.         m_nColorTimer = startTimer(1000);  
            53.     }  
            54. }  
            55.   
            56. void ColorMaker::stop()  
            57. {  
            58.     if(m_nColorTimer > 0)  
            59.     {  
            60.         killTimer(m_nColorTimer);  
            61.         m_nColorTimer = 0;  
            62.     }  
            63. }  
            64.   
            65. void ColorMaker::timerEvent(QTimerEvent *e)  
            66. {  
            67.     if(e->timerId() == m_nColorTimer)  
            68.     {  
            69.         switch(m_algorithm)  
            70.         {  
            71.         case RandomRGB:  
            72.             m_currentColor.setRgb(qrand() % 255, qrand() % 255, qrand() % 255);  
            73.             break;  
            74.         case RandomRed:  
            75.             m_currentColor.setRed(qrand() % 255);  
            76.             break;  
            77.         case RandomGreen:  
            78.             m_currentColor.setGreen(qrand() % 255);  
            79.             break;  
            80.         case RandomBlue:  
            81.             m_currentColor.setBlue(qrand() % 255);  
            82.             break;  
            83.         case LinearIncrease:  
            84.             {  
            85.                 int r = m_currentColor.red() + 10;  
            86.                 int g = m_currentColor.green() + 10;  
            87.                 int b = m_currentColor.blue() + 10;  
            88.                 m_currentColor.setRgb(r % 255, g % 255, b % 255);  
            89.             }  
            90.             break;  
            91.         }  
            92.         emit colorChanged(m_currentColor);  
            93.         emit currentTime(QDateTime::currentDateTime().toString("yyyy-MM-dd hh:mm:ss"));  
            94.     }  
            95.     else  
            96.     {  
            97.         QObject::timerEvent(e);  
            98.     }  
            99. }  

                我使用一個(gè)周期為 1000 的定時(shí)器來(lái)產(chǎn)生顏色，定時(shí)器觸發(fā)時(shí)根據(jù)算法來(lái)構(gòu)造新的顏色值，發(fā)射 colorChanged 信號(hào)，同時(shí)也發(fā)送一個(gè) currentTime 信號(hào)。
            注冊(cè)一個(gè) QML 中可用的類型
                看過(guò)了怎樣實(shí)現(xiàn)一個(gè)可供 QML 訪問(wèn)的類，這節(jié)我們看看怎樣將一個(gè) C++ 類型注冊(cè)為 QML 類型以及怎樣在 QML 中使用這個(gè)類型。
                要達(dá)到這種目的，大概可以分四步：
            1. 實(shí)現(xiàn) C++ 類
            2. 注冊(cè) QML 類型
            3. 在 QML 中導(dǎo)入類型
            4. 在 QML 創(chuàng)建由 C++ 導(dǎo)出的類型的實(shí)例并使用
                ColorMaker 已經(jīng)就緒了，現(xiàn)在看看怎樣將其注冊(cè)為 QML 可以使用的類型。
            注冊(cè) QML 類型
                要注冊(cè)一個(gè) QML 類型，有多種方法可用，如 qmlRegisterSingletonType() 用來(lái)注冊(cè)一個(gè)單例類型， qmlRegisterType() 注冊(cè)一個(gè)非單例的類型， qmlRegisterTypeNotAvailable() 注冊(cè)一個(gè)類型用來(lái)占位， qmlRegisterUncreatableType() 通常用來(lái)注冊(cè)一個(gè)具有附加屬性的附加類型，……好吧，我這里只說(shuō)常規(guī)的類型注冊(cè)，其它的，請(qǐng)您參考 Qt SDK 吧。
                qmlRegisterType() 是個(gè)模板函數(shù)，有兩個(gè)原型：
            1. template<typename T>  
            2. int qmlRegisterType(const char *uri, int versionMajor, int versionMinor, const char *qmlName);  
            3.   
            4. template<typename T, int metaObjectRevision>  
            5. int qmlRegisterType(const char *uri, int versionMajor, int versionMinor, const char *qmlName);  

                前一個(gè)原型一般用來(lái)注冊(cè)一個(gè)新類型，而后一個(gè)可以為特定的版本注冊(cè)類型。后面這個(gè)牽涉到 Qt Quick 的類型和版本機(jī)制，三言兩語(yǔ)不能盡述，咱們單說(shuō)前一個(gè)原型的使用。要使用 qmlRegisterType 需要包含 QtQml 頭文件。
                先說(shuō)模板參數(shù) typename ，它就是你實(shí)現(xiàn)的 C++ 類的類名。
                qmlRegisterType() 的第一個(gè)參數(shù) uri ，讓你指定一個(gè)唯一的包名，類似 Java 中的那種，一是用來(lái)避免名字沖突，而是可以把多個(gè)相關(guān)類聚合到一個(gè)包中方便引用。比如我們常寫(xiě)這個(gè)語(yǔ)句 "import QtQuick.Controls 1.1" ，其中的 "QtQuick.Controls" 就是包名 uri ，而 1.1 則是版本，是 versionMajor 和 versionMinor 的組合。 qmlName 則是 QML 中可以使用的類名。
                下面是 colorMaker 示例的 main.cpp 文件：
            1. #include <QtGui/QGuiApplication>  
            2. #include "qtquick2applicationviewer.h"  
            3. #include <QtQml>  
            4. #include "colorMaker.h"  
            5.   
            6.   
            7. int main(int argc, char *argv[])  
            8. {  
            9.     QGuiApplication app(argc, argv);  
            10.     qmlRegisterType<ColorMaker>("an.qt.ColorMaker", 1, 0, "ColorMaker");  
            11.   
            12.     QtQuick2ApplicationViewer viewer;  
            13.     viewer.setMainQmlFile(QStringLiteral("qml/colorMaker/main.qml"));  
            14.     viewer.showExpanded();  
            15.   
            16.     return app.exec();  
            17. }  

                上面的代碼將 ColorMaker 類注冊(cè)為 QML 類 ColorMaker ，主版本為 1 ，次版本為 0 ，而我起的包名則是 an.qt.ColorMaker 。注冊(cè)動(dòng)作一定要放在 QML 上下文創(chuàng)建之前，否則的話，木有用滴。
            在 QML 中導(dǎo)入 C++ 注冊(cè)的類型
                一旦你在 C++ 中注冊(cè)好了 QML 類型，就可以在 QML 文檔中引入你注冊(cè)的包，然后使用注冊(cè)的類型。要引入包，使用 import 語(yǔ)句。比如要使用我們注冊(cè)的 ColorMaker 類，可以在 QML 文檔中加入下面的 import 語(yǔ)句：
            [javascript] view plain copy
            1. import an.qt.ColorMaker 1.0  

            在 QML 中創(chuàng)建 C++ 導(dǎo)入類型的實(shí)例
                引入包后，你就可以在 QML 中創(chuàng)建 C++ 導(dǎo)入類型的對(duì)象了，與 QML 內(nèi)建類型的使用完全一樣。如下是創(chuàng)建一個(gè) ColorMaker 實(shí)例的代碼：
            [javascript] view plain copy
            1. Rectangle {  
            2.     width: 360;  
            3.     height: 360;  
            4.       
            5.     ColorMaker {  
            6.         id: colorMaker;  
            7.         color: Qt.green;  
            8.     }  
            9. }  

                如你所見(jiàn)，ColorMaker 的使用與 Retangle 沒(méi)什么區(qū)別。如果你想在別處引用 ColorMaker 的實(shí)例，可以給實(shí)例指定一個(gè)唯一的 id ，就像上面的代碼中那樣。
            完整的 colorMaker 實(shí)例
                如何定義一個(gè)可以導(dǎo)出到 QML 中的 C++ 類、如何注冊(cè) QML 類型、如何在 QML 中使用 C++ 導(dǎo)出的類型，都介紹完了，現(xiàn)在來(lái)看看完整的 colorMaker 。
                如果你對(duì)如何在 QML 中使用信號(hào)與槽還有疑問(wèn)，請(qǐng)溫習(xí)下《Qt Quick 事件處理之信號(hào)與槽》再往下看。如果你對(duì) QML 的基本語(yǔ)法忘了，請(qǐng)溫習(xí)《QML 語(yǔ)言基礎(chǔ)》。如果你不記得 Qt Quick 的基本元素，看《Qt Quick 簡(jiǎn)單教程》吧。
               C++ 代碼前面都展示過(guò)了，這里看下完整的 main.qml 文檔：
            [javascript] view plain copy
            1. import QtQuick 2.0  
            2. import QtQuick.Controls 1.1  
            3. import an.qt.ColorMaker 1.0  
            4.   
            5. Rectangle {  
            6.     width: 360;  
            7.     height: 360;  
            8.     Text {  
            9.         id: timeLabel;  
            10.         anchors.left: parent.left;  
            11.         anchors.leftMargin: 4;  
            12.         anchors.top: parent.top;  
            13.         anchors.topMargin: 4;  
            14.         font.pixelSize: 26;  
            15.     }  
            16.     ColorMaker {  
            17.         id: colorMaker;  
            18.         color: Qt.green;  
            19.     }  
            20.   
            21.     Rectangle {  
            22.         id: colorRect;  
            23.         anchors.centerIn: parent;  
            24.         width: 200;  
            25.         height: 200;  
            26.         color: "blue";  
            27.     }  
            28.   
            29.     Button {  
            30.         id: start;  
            31.         text: "start";  
            32.         anchors.left: parent.left;  
            33.         anchors.leftMargin: 4;  
            34.         anchors.bottom: parent.bottom;  
            35.         anchors.bottomMargin: 4;  
            36.         onClicked: {  
            37.             colorMaker.start();  
            38.         }  
            39.     }  
            40.     Button {  
            41.         id: stop;  
            42.         text: "stop";  
            43.         anchors.left: start.right;  
            44.         anchors.leftMargin: 4;  
            45.         anchors.bottom: start.bottom;  
            46.         onClicked: {  
            47.             colorMaker.stop();  
            48.         }  
            49.     }  
            50.   
            51.     function changeAlgorithm(button, algorithm){  
            52.         switch(algorithm)  
            53.         {  
            54.         case 0:  
            55.             button.text = "RandomRGB";  
            56.             break;  
            57.         case 1:  
            58.             button.text = "RandomRed";  
            59.             break;  
            60.         case 2:  
            61.             button.text = "RandomGreen";  
            62.             break;  
            63.         case 3:  
            64.             button.text = "RandomBlue";  
            65.             break;  
            66.         case 4:  
            67.             button.text = "LinearIncrease";  
            68.             break;  
            69.         }  
            70.     }  
            71.   
            72.     Button {  
            73.         id: colorAlgorithm;  
            74.         text: "RandomRGB";  
            75.         anchors.left: stop.right;  
            76.         anchors.leftMargin: 4;  
            77.         anchors.bottom: start.bottom;  
            78.         onClicked: {  
            79.             var algorithm = (colorMaker.algorithm() + 1) % 5;  
            80.             changeAlgorithm(colorAlgorithm, algorithm);  
            81.             colorMaker.setAlgorithm(algorithm);  
            82.         }  
            83.     }  
            84.   
            85.     Button {  
            86.         id: quit;  
            87.         text: "quit";  
            88.         anchors.left: colorAlgorithm.right;  
            89.         anchors.leftMargin: 4;  
            90.         anchors.bottom: start.bottom;  
            91.         onClicked: {  
            92.             Qt.quit();  
            93.         }  
            94.     }  
            95.   
            96.     Component.onCompleted: {  
            97.         colorMaker.color = Qt.rgba(0,180,120, 255);  
            98.         colorMaker.setAlgorithm(ColorMaker.LinearIncrease);  
            99.         changeAlgorithm(colorAlgorithm, colorMaker.algorithm());  
            100.     }  
            101.   
            102.     Connections {  
            103.         target: colorMaker;  
            104.         onCurrentTime:{  
            105.             timeLabel.text = strTime;  
            106.             timeLabel.color = colorMaker.timeColor;  
            107.         }  
            108.     }  
            109.   
            110.     Connections {  
            111.         target: colorMaker;  
            112.         onColorChanged:{  
            113.             colorRect.color = color;  
            114.         }  
            115.     }  
            116. }  

                main.qml 的界面分成了三部分，參看圖 1 。頂部是一個(gè) Text ，用來(lái)顯示由 ColorMaker 提供的時(shí)間，我使用 Connections 對(duì)象，指定 target 為 colorMaker ，在 onCurrentTime 信號(hào)處理器中改變 timeLabel 的文本和顏色。這里使用 ColorMaker 的 timeColor 屬性，該屬性的讀取函數(shù)是 timeColor ，回看一下 colorMaker.cpp 中的實(shí)現(xiàn)：
            1. QColor ColorMaker::timeColor() const  
            2. {  
            3.     QTime time = QTime::currentTime();  
            4.     int r = time.hour();  
            5.     int g = time.minute()*2;  
            6.     int b = time.second()*4;  
            7.     return QColor::fromRgb(r, g, b);  
            8. }  

                timeColor() 函數(shù)獲取當(dāng)前時(shí)間，取時(shí)、分、秒轉(zhuǎn)換為 R 、 G 、 B 值，構(gòu)造一個(gè) QColor 對(duì)象。
                我構(gòu)造了ColorMaker 類的一個(gè)實(shí)例， id 為 colorMaker ，初始化顏色值為 green 。
                colorMaker 實(shí)例界面的中間是一個(gè) Rectangle 對(duì)象，id 是 colorRect 。我使用 Connections 對(duì)象，指定 target 為 colorMaker ，在 onColorChanged 信號(hào)處理器中改變 colorRect 的顏色。
                界面的底部就是幾個(gè)按鈕，使用錨布局把它們排成一行。 start 按鈕的 onClicked 信號(hào)處理器調(diào)用 colorMaker 的 start() 槽，啟動(dòng)顏色生成器。 stop 按鈕的 onClicked 信號(hào)處理器調(diào)用 colorMaker 的 stop() 槽，停止顏色生成器。而 colorAlgorithm 按鈕則每點(diǎn)擊一次就切換一個(gè)顏色生成算法，同時(shí)調(diào)用 changeAlgorithm() 函數(shù)，根據(jù)算法改變按鈕上的文字。 quit 按鈕一點(diǎn)就退出應(yīng)用。
                main.qml 還引入了一個(gè)新內(nèi)容：定義函數(shù)。這個(gè)可以參考 JavaScript 的教程。我們定義的 changeAlgorithm 函數(shù)，接受兩個(gè)參數(shù)， button 和 algorithm 。如果你是 C++ 程序猿，可能有點(diǎn)兒不適應(yīng)：怎么參數(shù)就木有類型呢哈…… JavaScript 就是醬紫滴，擁有動(dòng)態(tài)類型，一個(gè)變量在賦值時(shí)決定其類型。
                這就是 colorMaker 的全部了。
                
                好啦，現(xiàn)在再來(lái)看看怎樣導(dǎo)出一個(gè)對(duì)象到 QML 中。
            導(dǎo)出一個(gè) C++ 對(duì)象為 QML 的屬性
                上面看了怎樣導(dǎo)出一個(gè) QML 類型在 QML 文檔中使用，你還可以把 C++ 中創(chuàng)建的對(duì)象作為屬性傳遞到 QML 環(huán)境中，然后在 QML 環(huán)境中訪問(wèn)。我們還是以 colorMaker 為例，對(duì)其代碼做適當(dāng)修改來(lái)適應(yīng)本節(jié)的內(nèi)容。
            注冊(cè)屬性
                要將一個(gè)對(duì)象注冊(cè)為屬性很簡(jiǎn)單，colorMaker 的 main.cpp 修改后如下：
            1. #include <QtGui/QGuiApplication>  
            2. #include "qtquick2applicationviewer.h"  
            3. #include <QtQml>  
            4. #include "colorMaker.h"  
            5.   
            6.   
            7. int main(int argc, char *argv[])  
            8. {  
            9.     QGuiApplication app(argc, argv);  
            10.   
            11.     QtQuick2ApplicationViewer viewer;  
            12.       
            13.     viewer.rootContext()->setContextProperty("colorMaker", new ColorMaker);  
            14.       
            15.     viewer.setMainQmlFile(QStringLiteral("qml/colorMaker/main.qml"));  
            16.     viewer.showExpanded();  
            17.   
            18.     return app.exec();  
            19. }  

                注意我在 viewer 變量后增加的新語(yǔ)句：
            1. viewer.rootContext()->setContextProperty("colorMaker", new ColorMaker);  

                正式這行代碼從堆上分配了一個(gè) ColorMaker 對(duì)象，然后注冊(cè)為 QML 上下文的屬性，起了個(gè)名字就叫 colorMaker 。
                viewer.rootContext() 返回的是 QQmlContext 對(duì)象。 QQmlContext 類代表一個(gè) QML 上下文，它的 setContextProperty() 方法可以為該上下文設(shè)置一個(gè)全局可見(jiàn)的屬性。要注意的是，你 new 出來(lái)的對(duì)象， QQmlContext 只是使用，不會(huì)幫你刪除，你需要自己找一個(gè)合適的時(shí)機(jī)來(lái)刪除它。
                還有一點(diǎn)要說(shuō)明，因?yàn)槲覀內(nèi)サ袅?qmlRegisterType() 調(diào)用，所以在 main.qml 中不能再訪問(wèn) ColorMaker 類了，比如你不能通過(guò)類名來(lái)引用它定義的 GenerateAlgorithm 枚舉類型， colorMaker.setAlgorithm(ColorMaker.LinearIncrease) 語(yǔ)句會(huì)導(dǎo)致下面的報(bào)錯(cuò)：
            [javascript] view plain copy
            1. ReferenceError: ColorMaker is not defined  

                現(xiàn)在來(lái)看如何在 QML 中使用我們導(dǎo)出的屬性
            在 QML 中使用關(guān)聯(lián)到 C++ 對(duì)象的屬性
                一旦調(diào)用 setContextProperty() 導(dǎo)出了屬性，就可以在 QML 中使用了，不需要 import 語(yǔ)句哦。下面是 main.qml 修改后的代碼：
            [javascript] view plain copy
            1. import QtQuick 2.0  
            2. import QtQuick.Controls 1.1  
            3. //[1]  
            4. //import an.qt.ColorMaker 1.0  
            5.   
            6. Rectangle {  
            7.     width: 360;  
            8.     height: 360;  
            9.     Text {  
            10.         id: timeLabel;  
            11.         anchors.left: parent.left;  
            12.         anchors.leftMargin: 4;  
            13.         anchors.top: parent.top;  
            14.         anchors.topMargin: 4;  
            15.         font.pixelSize: 26;  
            16.     }  
            17.     /* [2] 
            18.     ColorMaker { 
            19.         id: colorMaker; 
            20.         color: Qt.green; 
            21.     } 
            22.     */  
            23.   
            24.     Rectangle {  
            25.         id: colorRect;  
            26.         anchors.centerIn: parent;  
            27.         width: 200;  
            28.         height: 200;  
            29.         color: "blue";  
            30.     }  
            31.   
            32.     Button {  
            33.         id: start;  
            34.         text: "start";  
            35.         anchors.left: parent.left;  
            36.         anchors.leftMargin: 4;  
            37.         anchors.bottom: parent.bottom;  
            38.         anchors.bottomMargin: 4;  
            39.         onClicked: {  
            40.             colorMaker.start();  
            41.         }  
            42.     }  
            43.     Button {  
            44.         id: stop;  
            45.         text: "stop";  
            46.         anchors.left: start.right;  
            47.         anchors.leftMargin: 4;  
            48.         anchors.bottom: start.bottom;  
            49.         onClicked: {  
            50.             colorMaker.stop();  
            51.         }  
            52.     }  
            53.   
            54.     function changeAlgorithm(button, algorithm){  
            55.         switch(algorithm)  
            56.         {  
            57.         case 0:  
            58.             button.text = "RandomRGB";  
            59.             break;  
            60.         case 1:  
            61.             button.text = "RandomRed";  
            62.             break;  
            63.         case 2:  
            64.             button.text = "RandomGreen";  
            65.             break;  
            66.         case 3:  
            67.             button.text = "RandomBlue";  
            68.             break;  
            69.         case 4:  
            70.             button.text = "LinearIncrease";  
            71.             break;  
            72.         }  
            73.     }  
            74.   
            75.     Button {  
            76.         id: colorAlgorithm;  
            77.         text: "RandomRGB";  
            78.         anchors.left: stop.right;  
            79.         anchors.leftMargin: 4;  
            80.         anchors.bottom: start.bottom;  
            81.         onClicked: {  
            82.             var algorithm = (colorMaker.algorithm() + 1) % 5;  
            83.             changeAlgorithm(colorAlgorithm, algorithm);  
            84.             colorMaker.setAlgorithm(algorithm);  
            85.         }  
            86.     }  
            87.   
            88.     Button {  
            89.         id: quit;  
            90.         text: "quit";  
            91.         anchors.left: colorAlgorithm.right;  
            92.         anchors.leftMargin: 4;  
            93.         anchors.bottom: start.bottom;  
            94.         onClicked: {  
            95.             Qt.quit();  
            96.         }  
            97.     }  
            98.   
            99.     Component.onCompleted: {  
            100.         colorMaker.color = Qt.rgba(0,180,120, 255);  
            101.         //[3]  
            102.         //colorMaker.setAlgorithm(ColorMaker.LinearIncrease);  
            103.         colorMaker.setAlgorithm(2);  
            104.         changeAlgorithm(colorAlgorithm, colorMaker.algorithm());  
            105.     }  
            106.   
            107.     Connections {  
            108.         target: colorMaker;  
            109.         onCurrentTime:{  
            110.             timeLabel.text = strTime;  
            111.             timeLabel.color = colorMaker.timeColor;  
            112.         }  
            113.     }  
            114.   
            115.     Connections {  
            116.         target: colorMaker;  
            117.         onColorChanged:{  
            118.             colorRect.color = color;  
            119.         }  
            120.     }  
            121. }  

                main.qml 代碼主要修改了三處，我已經(jīng)使用方括號(hào)標(biāo)注出來(lái)了。因?yàn)槲覍?dǎo)出的屬性命名為 colorMaker ，和導(dǎo)出 ColorMaker 類時(shí)構(gòu)造的實(shí)例的 id 一樣，所以改動(dòng)少了些。
                你看到了，導(dǎo)出的屬性可以直接使用，與屬性關(guān)聯(lián)的對(duì)象，它的信號(hào)、槽、可調(diào)用方法（使用 Q_INVOKABLE 宏修飾的方法）、屬性都可以使用，只是不能通過(guò)類名來(lái)引用枚舉值了。
            在 C++ 中使用 QML 對(duì)象
                看過(guò)了如何在 QML 中使用 C++ 類型或?qū)ο螅F(xiàn)在來(lái)看如何在 C++ 中使用 QML 對(duì)象。
                我們可以使用 QML 對(duì)象的信號(hào)、槽，訪問(wèn)它們的屬性，都沒(méi)有問(wèn)題，因?yàn)楹芏?QML 對(duì)象對(duì)應(yīng)的類型，原本就是 C++ 類型，比如 Image 對(duì)應(yīng) QQuickImage ， Text 對(duì)應(yīng) QQuickText……但是，這些與 QML 類型對(duì)應(yīng)的 C++ 類型都是私有的，你寫(xiě)的 C++ 代碼也不能直接訪問(wèn)。腫么辦？
                Qt 最核心的一個(gè)基礎(chǔ)特性，就是元對(duì)象系統(tǒng)，通過(guò)元對(duì)象系統(tǒng)，你可以查詢 QObject 的某個(gè)派生類的類名、有哪些信號(hào)、槽、屬性、可調(diào)用方法等等信息，然后也可以使用 QMetaObject::invokeMethod() 調(diào)用 QObject 的某個(gè)注冊(cè)到元對(duì)象系統(tǒng)中的方法。而對(duì)于使用 Q_PROPERTY 定義的屬性，可以使用 QObject 的 property() 方法訪問(wèn)屬性，如果該屬性定義了 WRITE 方法，還可以使用 setProperty() 修改屬性。所以只要我們找到 QML 環(huán)境中的某個(gè)對(duì)象，就可以通過(guò)元對(duì)象系統(tǒng)來(lái)訪問(wèn)它的屬性、信號(hào)、槽等。
            查找一個(gè)對(duì)象的孩子
                QObject 類的構(gòu)造函數(shù)有一個(gè) parent 參數(shù)，可以指定一個(gè)對(duì)象的父親， QML 中的對(duì)象其實(shí)借助這個(gè)組成了以根 item 為父的一棵對(duì)象樹(shù)。
                而 QObject 定義了一個(gè)屬性 objectName ，這個(gè)對(duì)象名字屬性，就可以用于查找對(duì)象。現(xiàn)在該說(shuō)到查找對(duì)象的方法了： findChild() 和 findChildren() 。它們的函數(shù)原型如下：
            1. T QObject::findChild(const QString & name = QString(),\  
            2.     Qt::FindChildOptions options = \  
            3.     Qt::FindChildrenRecursively) const;  
            4. QList<T> QObject::findChildren(const QString & name = \  
            5.     QString(), Qt::FindChildOptions options = \  
            6. Qt::FindChildrenRecursively) const;  
            7. QList<T> QObject::findChildren(const QRegExp & regExp, \  
            8.     Qt::FindChildOptions options = \  
            9.     Qt::FindChildrenRecursively) const;  
            10. QList<T> QObject::findChildren(const QRegularExpression & re,\  
            11.      Qt::FindChildOptions options = \  
            12.      Qt::FindChildrenRecursively) const;  

                都是模板方法，從命名上也可以看出，一個(gè)返回單個(gè)對(duì)象，一個(gè)返回對(duì)象列表。閑話少說(shuō)，現(xiàn)在讓我們看看如何查詢一個(gè)或多個(gè)對(duì)象，我們先以 Qt Widgets 為例來(lái)說(shuō)明用法哈。
                示例 1 ：
            1. QPushButton *button = parentWidget->findChild<QPushButton *>("button1");  

                查找 parentWidget 的名為 "button1" 的類型為 QPushButton 的孩子。
                示例 2 ：
            1. QList<QWidget *> widgets = parentWidget.findChildren<QWidget *>("widgetname");  

                返回 parentWidget 所有名為 "widgetname" 的 QWidget 類型的孩子列表。
            使用元對(duì)象調(diào)用一個(gè)對(duì)象的方法
                QMetaObject 的 invokeMethod() 方法用來(lái)調(diào)用一個(gè)對(duì)象的信號(hào)、槽、可調(diào)用方法。它是個(gè)靜態(tài)方法，其函數(shù)原型如下：
            1. 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]  
                其實(shí) QMetaObject 還有三個(gè) invokeMethod() 函數(shù)，不過(guò)都是上面這個(gè)原型的重載，所以我們只要介紹上面這個(gè)就 OK 了。
                先說(shuō)返回值吧，返回 true 說(shuō)明調(diào)用成功。返回 false ，要么是因?yàn)闆](méi)有你說(shuō)的那個(gè)方法，要么是參數(shù)類型不匹配。
                第一個(gè)參數(shù)是被調(diào)用對(duì)象的指針。
                第二個(gè)參數(shù)是方法名字。
                第三個(gè)參數(shù)是連接類型，看到這里你就知道， invokeMethod 為信號(hào)與槽而生，你可以指定連接類型，如果你要調(diào)用的對(duì)象和發(fā)起調(diào)用的線程是同一個(gè)線程，那么可以使用 Qt::DirectConnection 或 Qt::AutoConnection 或 Qt::QueuedConnection ，如果被調(diào)用對(duì)象在另一個(gè)線程，那么建議你使用 Qt::QueuedConnection 。
                第四個(gè)參數(shù)用來(lái)接收返回指。
                然后就是多達(dá) 10 個(gè)可以傳遞給被調(diào)用方法的參數(shù)。嗯，看來(lái)信號(hào)與槽的參數(shù)個(gè)數(shù)是有限制的，不能超過(guò) 10 個(gè)。
                對(duì)于要傳遞給被調(diào)用方法的參數(shù)，使用 QGenericArgument 來(lái)表示，你可以使用 Q_ARG 宏來(lái)構(gòu)造一個(gè)參數(shù)，它的定義是：
            1. QGenericArgument Q_ARG( Type, const Type & value)  

                返回類型是類似的，使用 QGenericReturnArgument 表示，你可以使用 Q_RETURN_ARG 宏來(lái)構(gòu)造一個(gè)接收返回指的參數(shù)，它的定義是：
            1. QGenericReturnArgument Q_RETURN_ARG( Type, Type & value)  

                好啦，總算把這個(gè)天殺的函數(shù)介紹完了，下面我們看看怎么用。
                假設(shè)一個(gè)對(duì)象有這么一個(gè)槽 compute(QString, int, double) ，返回一個(gè) QString 對(duì)象，那么你可以這么調(diào)用（同步方式）：
            1. QString retVal;  
            2. QMetaObject::invokeMethod(obj, "compute", Qt::DirectConnection,  
            3.                           Q_RETURN_ARG(QString, retVal),  
            4.                           Q_ARG(QString, "sqrt"),  
            5.                           Q_ARG(int, 42),  
            6.                           Q_ARG(double, 9.7));  

                如果你要讓一個(gè)線程對(duì)象退出，可以這么調(diào)用（隊(duì)列連接方式）：
            1. QMetaObject::invokeMethod(thread, "quit",  
            2.                           Qt::QueuedConnection);  

                更多細(xì)節(jié)請(qǐng)參考 Qt 幫助 中的 QMetaObject 手冊(cè)。
            callQml 示例
                現(xiàn)在讓我們創(chuàng)建一個(gè)新的項(xiàng)目，名字是 callQml ，添加 changeColor.h 、 changeColor.cpp 兩個(gè)文件。 main.qml 內(nèi)容如下：
            [javascript] view plain copy
            1. import QtQuick 2.0  
            2. import QtQuick.Controls 1.1  
            3.   
            4. Rectangle {  
            5.     objectName: "rootRect";  
            6.     width: 360;  
            7.     height: 360;  
            8.     Text {  
            9.         objectName: "textLabel";  
            10.         text: "Hello World";  
            11.         anchors.centerIn: parent;  
            12.         font.pixelSize: 26;  
            13.     }  
            14.   
            15.     Button {  
            16.         anchors.right: parent.right;  
            17.         anchors.rightMargin: 4;  
            18.         anchors.bottom: parent.bottom;  
            19.         anchors.bottomMargin: 4;  
            20.         text: "quit";  
            21.         objectName: "quitButton";  
            22.     }  
            23. }  

                我們給根元素起了個(gè)名字 "rootRect" ，給退出按鈕起了個(gè)名字 "quitButton" ，給文本起了名字 "textLabel" ，我們會(huì)在 C++ 代碼中通過(guò)這些個(gè)名字來(lái)查找對(duì)應(yīng)的對(duì)象并改變它們。
                現(xiàn)在來(lái)看看 main.cpp ：
            1. #include <QtGui/QGuiApplication>  
            2. #include "qtquick2applicationviewer.h"  
            3. #include <QQuickItem>  
            4. #include "changeColor.h"  
            5. #include <QMetaObject>  
            6. #include <QDebug>  
            7. #include <QColor>  
            8. #include <QVariant>  
            9.   
            10. int main(int argc, char *argv[])  
            11. {  
            12.     QGuiApplication app(argc, argv);  
            13.   
            14.     QtQuick2ApplicationViewer viewer;  
            15.     viewer.setMainQmlFile(QStringLiteral("qml/callQml/main.qml"));  
            16.     viewer.showExpanded();  
            17.   
            18.     QQuickItem * rootItem = viewer.rootObject();  
            19.     new ChangeQmlColor(rootItem);  
            20.     QObject * quitButton = rootItem->findChild<QObject*>("quitButton");  
            21.     if(quitButton)  
            22.     {  
            23.         QObject::connect(quitButton, SIGNAL(clicked()), &app, SLOT(quit()));  
            24.     }  
            25.   
            26.     QObject *textLabel = rootItem->findChild<QObject*>("textLabel");  
            27.     if(textLabel)  
            28.     {  
            29.         //1. failed call  
            30.         bool bRet = QMetaObject::invokeMethod(textLabel, "setText", Q_ARG(QString, "world hello"));  
            31.         qDebug() << "call setText return - " << bRet;  
            32.         textLabel->setProperty("color", QColor::from#ff0000);  
            33.         bRet = QMetaObject::invokeMethod(textLabel, "doLayout");  
            34.         qDebug() << "call doLayout return - " << bRet;  
            35.     }  
            36.   
            37.     return app.exec();  
            38. }  

                在一開(kāi)始我通過(guò) viewer.rootObject() ，獲取到了作為根元素的 Rectangle ，然后把它交給一個(gè) ChangeQmlColor 對(duì)象，該對(duì)象會(huì)內(nèi)部通過(guò)一個(gè)定時(shí)器，一秒改變一次傳入對(duì)象的顏色。
                緊接著，我使用 QObject 的 findChild() 找到了 quitButton 按鈕，把它的 clicked() 信號(hào)連接到 QGuiApplication 的 quit() 槽上。所以你點(diǎn)擊這個(gè)按鈕，應(yīng)用就退出了。
                后來(lái)，我又通過(guò)名字 "textLabel" 找到了 textLabel 對(duì)象。首先我企圖使用 invodeMethod() 調(diào)用 setText() 方法來(lái)改變 textLabel 的文本，這個(gè)注定是會(huì)失敗的，因?yàn)?QML 中的Text 對(duì)象對(duì)應(yīng) C++ QQuickText 類，而 QQuickText 沒(méi)有名為 setText 的槽或者可調(diào)用方法。我查看了頭文件 qquicktext_p.h ，發(fā)現(xiàn)它有一個(gè)使用 Q_INVOKABLE 宏修飾的 doLayout() 的方法，所以后來(lái)我又調(diào)用 doLayout() ，這次成功了。
                圖 2 是運(yùn)行效果：
                        圖 2 callQml 運(yùn)行效果圖
                Hello World 這行字變成了紅色，是因?yàn)槲以?main() 函數(shù)中使用 setProperty 修改了 textLabel 的 color 屬性。
                下面是 Qt Creator 應(yīng)用程序輸出窗口的信息，可以驗(yàn)證對(duì) Text 方法的調(diào)用是否成功：
            [plain] view plain copy
            1. Starting D:\projects\...\release\callQml.exe...  
            2. QMetaObject::invokeMethod: No such method QQuickText::setText(QString)  
            3. call setText return -  false   
            4. call doLayout return -  true   

                好啦，最后看看界面背景為么變成了淺綠色。這正是下面這行代碼的功勞：
            [csharp] view plain copy
            1. new ChangeQmlColor(rootItem);  

                它以 rootItem 為參數(shù)創(chuàng)建了一個(gè) ChangeQmlColor 對(duì)象，而 ChangeQmlColor 類會(huì)改變傳給它的對(duì)象的顏色。 
                ChangeQmlColor 類定義如下：
            1. #ifndef CHANGECOLOR_H  
            2. #define CHANGECOLOR_H  
            3. #include <QObject>  
            4. #include <QTimer>  
            5.   
            6. class ChangeQmlColor : public QObject  
            7. {  
            8.     Q_OBJECT  
            9. public:  
            10.     ChangeQmlColor(QObject *target, QObject *parent = 0);  
            11.     ~ChangeQmlColor();  
            12.   
            13. protected slots:  
            14.     void onTimeout();  
            15.   
            16. private:  
            17.     QTimer m_timer;  
            18.     QObject *m_target;  
            19. };  
            20.   
            21. #endif  

                實(shí)現(xiàn)文件 changeColor.cpp ：
            1. #include "changeColor.h"  
            2. #include <QDateTime>  
            3. #include <QColor>  
            4. #include <QVariant>  
            5.   
            6. ChangeQmlColor::ChangeQmlColor(QObject *target, QObject *parent)  
            7.     : QObject(parent)  
            8.     , m_timer(this)  
            9.     , m_target(target)  
            10. {  
            11.     qsrand(QDateTime::currentDateTime().toTime_t());  
            12.     connect(&m_timer, SIGNAL(timeout()), this, SLOT(onTimeout()));  
            13.     m_timer.start(1000);  
            14. }  
            15.   
            16. ChangeQmlColor::~ChangeQmlColor()  
            17. {}  
            18.   
            19. void ChangeQmlColor::onTimeout()  
            20. {  
            21.     QColor color = QColor::fromRgb(qrand()%256, qrand()%256, qrand()%256);  
            22.     m_target->setProperty("color", color);  
            23. }  

                很簡(jiǎn)單，不說(shuō)啦。
                版權(quán)所有 foruok ，轉(zhuǎn)載請(qǐng)注明出處：http://blog.csdn.net/foruok 。
            
		
            
			posted on 2017-08-21 13:23 zmj 閱讀(746) 評(píng)論(0)  編輯 收藏 引用  
		
            
	
            
	
	





            
	    
    




            



            


            

	
            
		
		
            只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。
            
		
            
		
				
		
		
		
            
		
            			
		
		
		
		
            
		
            
			
		
            
		
            
			
		
            
		
            
			
            網(wǎng)站導(dǎo)航:
			博客園  
			IT新聞  
			BlogJava  			
			博問(wèn)  
			Chat2DB  
			管理
			
            		
		
            
		
            
			
				

            


            

            		
		
            
	
            	

            



            

				

            


    
    







            
	   
	



久久被窝电影亚洲爽爽爽|
91精品国产91久久久久福利
|
东方aⅴ免费观看久久av|
国产精品伦理久久久久久|
久久久久国产一级毛片高清版|
人妻无码中文久久久久专区|
久久影院综合精品|
久久精品国产亚洲77777|
性色欲网站人妻丰满中文久久不卡|
亚洲欧洲精品成人久久奇米网|
久久久午夜精品福利内容|
狠狠色丁香久久婷婷综合蜜芽五月|
久久久久亚洲AV成人网人人网站
|
久久青草国产手机看片福利盒子
|
亚洲精品美女久久777777|
蜜臀久久99精品久久久久久小说|
亚洲午夜久久久影院伊人|
精品久久人妻av中文字幕|
热re99久久精品国产99热|
久久精品亚洲精品国产欧美|
亚洲国产高清精品线久久|
精品国产乱码久久久久久人妻|
色欲综合久久中文字幕网|
91精品国产色综合久久|
国产亚州精品女人久久久久久
|
品成人欧美大片久久国产欧美|
久久久久九国产精品|
亚洲狠狠婷婷综合久久久久|
国产精品一区二区久久不卡|
精品乱码久久久久久夜夜嗨|
久久亚洲国产精品成人AV秋霞
|
久久综合给合久久狠狠狠97色69|
国产精品久久久久久福利漫画|
午夜精品久久久久9999高清|
性欧美丰满熟妇XXXX性久久久|
久久精品国产一区二区三区|
久久久亚洲欧洲日产国码二区
|
无码国内精品久久综合88|
91精品国产9l久久久久|
97视频久久久|
久久精品成人免费观看97|