從頭學Qt Quick（1） --體驗快速構建動態效果界面

自2005年Qt4發佈以來，Qt已經爲成千上萬的應用程序提供了框架服務，如今Qt已經基本上支持全部的開發平臺了，這裏面既包含了桌面、嵌入式領域，也包括了Android、IOS、WP等移動操做平臺，甚至支持最新的Ubuntu Phone。

Qt Quick是一個UI技術組，Qt Quick自己主要包含了QML、JavaScript、 Qt C++三種技術。其中的主角就是QML（Qt Declarative Module）也是我打算在這個系列裏面描述的主要對象。QML的主要做用我理解就是將界面設計與程序邏輯解耦，一般來講前端需求的變更遠超事後臺邏輯，所以界面與邏輯分離不只有利於開發人員之間的分工，也提供了更快速的迭代速度的可能性，也會大大下降程序的後期維護成本。

這套技術的主要框架以下

QML是一種簡單的腳本語言，語法和CSS比較接近，所以學起來至關簡單。QML最先出現是在Qt4.7版本中，從4.x過分到5.x算起來一共通過了十年的時間。最新的QML相對於4.x時代的QML有了很大的改進（下面列舉都是Qt Quick 2.0的特性）：

（1）基於OpenGL(ES)的場景實現，提升圖形繪製的效率。

（2）QML和JavaScript主導UI的建立，後臺圖形繪製採用C++。高效，靈活，可擴展性強。

（3）跨平臺：這裏不能說是完整意義上的跨平臺，這裏的跨平臺是指編譯的跨平臺「一次編寫，處處編譯」

 

這裏咱們首先建立一個簡單的Qt Quick應用，對QML有一個初步的印象。

咱們的目標是要建立一個鼠標點擊風車圖片後能在屏幕上轉起來的程序，下面的代碼能夠隨便看一下，看不懂不要緊，按照我給出的步驟作出來體驗一下就行。

新建一個QtQuick工程：

選擇Qt Quick2.x

建立完了大概是這個樣子，點那個綠色的按鈕就會出現一個簡單的窗口：

將兩張圖片素材放到工程的目錄下

將資源添加到Qt工程去，首先 建立一個資源前綴：

將兩張圖片加進去

編輯main.qml

import QtQuick 2.0
import QtQuick.Window 2.0

Window {
    id:root;
    visible: true;
    width: 600;
    height: 400;

    Image {
        id: bg

        width: root.width;
        height:root.height;
        source: "qrc:///images/bg.png";// 路徑根據本身設置的修改
    }

    Image {
        id: wheel;
        anchors.centerIn: parent;
        source: "qrc:///images/wheel.png";// 路徑根據本身設置的修改

        Behavior on rotation {

            NumberAnimation {
                duration: 5000
            }
        }

        MouseArea {
            width: wheel.width;
            height: wheel.height;

            onClicked: {
                wheel.rotation = 360;
            }
        }
    }

}

運行，是否是一個漂亮的窗口程序出如今了眼前呢？點擊中間的風車就會轉起來。

源代碼下載：http://download.csdn.net/detail/csulennon/8670283

在接下來的文章中會介紹QML的基本語法。