QML基礎——入門教程

QML入門教程(1)

QML是什么？

QML是一種描述性的腳本語言，文件格式以.qml結尾。語法格式非常像CSS(參考后文具體例子)，但又支持javacript形式的編程控制。它結合了QtDesigner UI和QtScript的優點。QtDesigner可以設計出.ui界面文件,但是不支持和Qt原生C++代碼的交互。QtScript可以和Qt原生代碼進行交互，但是有一個缺點，如果要在腳本中創建一個繼承於QObject的圖形對象非常不方便，只能在Qt代碼中創建圖形對象，然后從 QtScript中進行訪問。而QML可以在腳本里創建圖形對象，並且支持各種圖形特效，以及狀態機等，同時又能跟Qt寫的C++代碼進行方便的交互，使用起來非常方便。

 

如何使用？

在Qt C＋＋文件中通過QDeclarativeView加載，就像使用UiLoader加載.ui文件一樣。不過本文不會去介紹如何在Qt C＋＋中使用QML，而是把重點放在QML的語法上，不過別擔心看不到.qml文件的效果。Qt提供了一個工具QML Viewer可以查看.qml文件生成的效果，該程序在Qt的bin目錄下，應用名字叫qml(Windows下叫qml.exe)。所以你在看到別人提供的.qml文件時，你可以用下面命令qml filename.qml 查看.qml的執行結果，咱們的第一個Hello,World生成界面如下

開始QML吧

上面的Hello,World源代碼如下：

import Qt 4.7

Rectangle{
    id:page
    width:500; height:200
    color:"lightgray"

    Text{
        id:helloText
        text:"Hello World!  2012"
        font.pointSize:24; font.bold:true
        y:30;
        anchors.horizontalCenter:page.horizontalCenter
    }
}

第1行是Qt QML的統一用法，指明當前QML會使用Qt-4.7里已經定義好的類型，比如第3行的Rectangle和第8行的Text。

第3行開始至文章結束處則定義了一個矩形的圖形區域對象，第4行則申明了該矩形區域對象的id為”page”可以被其它對象識別並通過該id訪問其成員屬性，另外幾個屬性width/height/color則很好理解，語法跟CSS類似，可以寫在一行中用分號”;”隔開。

第8行至第12行則是一個文本對象，看它代碼的嵌套結構可以知道它是內嵌於Rectangle的。Text的屬性除了anchors其它幾個都能顧名思義。anchors描訴的是當前對象的位置和其它對象的相對關系，這里看到其水平中心位置在“page“的水平中心位置。如果想對anchors了解更多，請參考錨的解釋。

以上就是Hello,World的全部代碼，將其存為hellowordl.qml，那么只要執行qml hellowrold.qml就能看到文章前頭的界面了。

 

更多對象？

在上面的代碼中我們用到了Rectangle和Text，那么我還有哪些對象以及這些對象有哪些屬性呢。那么請訪問QML-Item類,Item類是QML最基礎的類，通過查看它的繼承類以及這些繼承類可用的屬性，你可以添加更多你感興趣的內容。

 

QML入門教程(2)

在上一篇文章里我們使用了最基礎的QML類型實現了文字Hello,World的顯示。這篇文章中將會增加顏色選項面板，用戶可以給 Hello,World設置不同的顏色，如下圖顯示

QML組件

從圖中可以看到選項面板由6個顏色小塊組成，它們唯一的區別就是顏色不一樣。那么我們就可以用組件(Component)來實現一個顏色塊，然后在需要的時候使用這個組件就可以了。組件其實和其它編程語言中的宏，函數，類，結構體等功能差不多，就是代碼復用。作為程序員，我知道你懂的。組件由一個單獨的QML文件名組成，文件名總是以大寫字母開頭，要使用該組件的時候直接使用該文件名就可以了。關於如何定義自己的組件，請訪問 Defining new Components。我們為一個顏色塊定義了一個Cell.qml文件，然后使用Cell作為一個去訪問它。

Cell.qml的內容

import Qt 4.7

Item {
    id: container
    property alias cellColor:rectangle.color
    signal clicked(color cellColor)
    width:40; height:25
    Rectangle{
        id:rectangle
        border.color:"white"
        anchors.fill:parent
    }
    MouseArea{
        anchors.fill:parent
        onClicked:container.clicked(container.cellColor)
    }
}

挨個看代碼～

Item {
    id: container
    property alias cellColor:rectangle.color
    signal clicked(color cellColor)
    width:40; height:25

Item是最常使用的QML類型，一般用作其它類型的容器，可以理解成最頂級的父類，功能類似於QtGui中的QWidget。用一個屬性別名訪問其內嵌對象rectangle的color屬性。在其它文件中可以用Cell對象的cellColor獲得rectangle的color值。 signal clicked(color cellColor)則為對象定義了一個信號，在代碼的其它部分可以發出這個信號。

Rectangle{
        id:rectangle
        border.color:"white"
        anchors.fill:parent
    }

這一部分沒有特別好說的，在Item中內嵌了一個id為rectangle白邊框的矩形區域，大小占滿整個Item。

MouseArea{
        anchors.fill:parent
        onClicked:container.clicked(container.cellColor)
    }

MouseArea則為Item增加了一塊鼠標響應區，看它的anchors知道，在整個Item區域內都是鼠標活動區，都能偵聽到鼠標事件。 onClicked那一行則相當於為鼠標單擊事件增加了一個處理行為，這里是發出了一個clicked()的信號。這個信號正是我們在Item里定義的那 個signal。 Cell.qml寫完了，再來看看程序的主文件。

main.qml的內容

import Qt 4.7

Rectangle {
    id:page
    width:500; height:200
    color:"lightgray"

    Text {
        id: helloText
        text: "2012.01.30"
        y:30
        anchors.horizontalCenter:page.horizontalCenter
        font.pointSize:24
        font.bold:true
    }
    Grid{
        id:colorPicker
        x:4; anchors.bottom:page.bottom; anchors.bottomMargin:4
        rows:2; columns:3; spacing:3

        Cell {cellColor:"red"; onClicked:helloText.color = cellColor}
        Cell {cellColor:"green"; onClicked:helloText.color = cellColor}
        Cell {cellColor:"blue"; onClicked:helloText.color = cellColor}
        Cell {cellColor:"yellow"; onClicked:helloText.color = cellColor}
        Cell {cellColor:"steelblue"; onClicked:helloText.color = cellColor}
        Cell {cellColor:"black"; onClicked:helloText.color = cellColor}
    }

}

這里在原來的基礎上增加了一個Grid網格。x坐標是4，底部挨着page的底部，所以我們看到的是在左下角。新增的6個Cell，名字和Cell.qml是一樣的。通過cellColor屬性將顏色傳給了每個顏色塊。當Cell接收到onClicked事件的時候,關聯的代碼回去修改Hello,World上的顏色。細心的朋友可能會注意到Cell只是定義了 clicked()的信號，並沒有定義onClicked()啊，是的這就是Component的語法規則了。如果你在Cell.qml里定義的是 clicked(),那么你在main.qml中引用的時候就該用onClicked()了。

 

QML入門教程(3)

 

經過前面兩個教程，文字也能顯示，也能處理鼠標事件了，來點動畫吧.

這個教程實現了當鼠標按住的時候，Hello,World從頂部到底部的一個旋轉過程，並帶有顏色漸變的效果。

完整的源代碼main.qml

import Qt 4.7

Rectangle {
    id:page
    width:500; height:200
    color:"lightgray"

    Text {
        id: helloText
        text: "2012.01.30"
        y:30
        anchors.horizontalCenter:page.horizontalCenter
        font.pointSize:24
        font.bold:true

        MouseArea{id:mouseArea; anchors.fill:parent}

        states:State {
            name: "down"; when: mouseArea.pressed == true
            PropertyChanges {
                target: helloText
                y:160
                rotation:180
                color:"red"
            }
        }

        transitions:Transition {
            from: ""
            to: "down"
            reversible:true
            ParallelAnimation{
                NumberAnimation{properties:"y,rotation"; duration:500; easing.type:Easing.InOutQuad}
                ColorAnimation {duration: 500 }

            }

        }

    }
    Grid{
        id:colorPicker
        x:4; anchors.bottom:page.bottom; anchors.bottomMargin:4
        rows:2; columns:3; spacing:3

        Cell {cellColor:"red"; onClicked:helloText.color = cellColor}
        Cell {cellColor:"green"; onClicked:helloText.color = cellColor}
        Cell {cellColor:"blue"; onClicked:helloText.color = cellColor}
        Cell {cellColor:"yellow"; onClicked:helloText.color = cellColor}
        Cell {cellColor:"steelblue"; onClicked:helloText.color = cellColor}
        Cell {cellColor:"black"; onClicked:helloText.color = cellColor}
    }

}

除了這個main.qml之外，還有一個Cell.qml也是需要的，和教程(2)中的完全一樣。下面來看一看比起教程(2)的代碼增加出來的內容。

Text {
      .............
        states:State {
            name: "down"; when: mouseArea.pressed == true
            PropertyChanges {
                target: helloText
                y:160
                rotation:180
                color:"red"
            }
        }

        transitions:Transition {
            from: ""
            to: "down"
            reversible:true
            ParallelAnimation{
                NumberAnimation{properties:"y,rotation"; duration:500; easing.type:Easing.InOutQuad}
                ColorAnimation {duration: 500 }
            }
        }
    }

states內嵌於Text之中，可以為Text元素添加多個狀態，現在的這個例子只增加了一個狀態。該狀態的名為為”down”,然后由“when”指 定了什么時候觸發這個狀態。PropertyChanges則指定了哪個元素的哪些屬性會發生什么樣的變化。例子中PropertyChanges利用 “target”指定了id為”helloText”的元素會發生變化，包括其y,rotation,color等屬性。
transitions 是用於增加動畫效果的（如果把transitions這一段代碼刪去，Hello,World的文字也會發生變化,但是看不到中間動畫漸變效果)。同樣可 以看到transitions是復數形式，意味着可以添加多個動畫過程。“from”和”to”指明了當前的動畫作用於哪兩個狀態變化之間。 “from”和”to”的參數名來自於State中的”name”屬性。
ParalleAnimation則指定了有多個 有多個動畫並行發生。NumberAnimation用於qreal類型的屬性變化,ColorAnimation則用於顏色變化。更多 Animation請在QML文檔中查找”Animation and Transitions”。

 

More Information, please refer to to:

http://doc.qt.nokia.com/4.7-snapshot/qml-tutorial.html

http://doc.qt.nokia.com/4.7-snapshot/qml-item.html