從頭學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的基本語法。