本文介紹的是Qt Quick 開始使用QML編程，剛才說又接觸Qt Quick，那么簡單的介紹以下，本文Qt Quick包含了一個名為QML的聲明式語言、Qt Declarative模塊和QML Viewer，先來看本文內(nèi)容。

Getting Started Programming with QML

歡迎來到QML——這個聲明式語言的世界！在這節(jié)入門指南里，我們將使用QML創(chuàng)建一個簡單的文本編輯器程序。讀完此節(jié)，你應(yīng)該能做好使用QML和Qt C++開發(fā)自己的應(yīng)用程序的準(zhǔn)備了。

Installation

首先，你需要安裝包含Qt 4.7，這個包含了Qt Quick的最新的Qt版本。（譯注：現(xiàn)在是Qt 4.7.2）安裝指南包含了安裝介紹以及不同平臺的安裝要求。 

QML to Build User Interfaces

我們要制作的這個程序是個用來加載、保存以及執(zhí)行一些文本操作的簡單的文本編輯器。本指南包含兩部分。第一部分包含使用QML中的生命語言來設(shè)計程序的布局和行為。使用Qt的Meta-Object-System，我們可以將C++函數(shù)暴露為QML元素使用的屬性。使用QML和Qt C++，我們可以有效的將應(yīng)用程序邏輯和界面邏輯解耦合。

最終源碼在examples/tutorials/gettingStarted/gsQml目錄下. 你或許要先編譯一下examples/tutorials/gettingStarted/gsQml/下的C++插件. 編譯完后，這個插件會存放在QML文件可以找到的一個目錄下。（譯注：編譯成功后，會在examples/tutorials/gettingStarted/gsQml/plugins/目錄下生成FileDialog.dll。）

只需要將QML文件作為qmlviewer的一個參數(shù)，就可以運(yùn)行這個文本編輯器了。本教程的C++部分假設(shè)讀者具備Qt編譯過程的基本知識。

定義一個按鈕和一個菜單

基本組件： 一個按鈕

我們先從生成一個按鈕開始。功能上來說，一個按鈕有一個鼠標(biāo)敏感性區(qū)域和一個標(biāo)簽。當(dāng)用戶按下，按鈕執(zhí)行動作。

QML中，基本的可視item是Rectangle元素。它有一些可以控制其外觀和位置的屬性。

Codeimport QtQuick 1.0  
 
 Rectangle {  
     id: simplebutton  
     color: "grey"  
     width: 150; height: 75  
 
     Text{  
         id: buttonLabel  
         anchors.centerIn: parent  
         text: "button label"  
     }  
 } 

首先import QtQuick 1.0允許qmlviewer導(dǎo)入我們后來會用到的QML元素。每一個QML文件都必須有這行。注意，import語句中包含了Qt模塊的版本。

這個簡單的矩形有一個唯一的標(biāo)識符，simplebutton，綁定到id屬性上。羅列出矩形元素的屬性，后跟冒號和值，可以將值綁定到對應(yīng)的屬性上。實(shí)例中，grey綁定到了color屬性上。同樣地，也綁定了矩形的widht和height。

Text元素是不可編輯的文本域。我們將它命名為buttonLabel。將值綁定到text屬性，可以設(shè)置文本域的字符串內(nèi)容。標(biāo)簽包含在矩形中，為了將其置于中間，我們將Text元素的anchors賦給它的parent，即simplebutton。anchors可能綁定到其他anchors上，從而更方便地分配布局。

我們將代碼保存為SimpleButton.qml。將這個文件作為參數(shù)傳給qmlviewer，就會顯示出一個帶文本標(biāo)簽的灰色矩形。

我們可以使用QML的事件處理來實(shí)現(xiàn)按鈕的點(diǎn)擊功能。QML的事件處理與Qt的signal slot機(jī)制非常類似。發(fā)出signals，連接到的slots就被調(diào)用。

CodeRectangle{  
     id:simplebutton  
     ...  
     MouseArea{  
         id: buttonMouseArea  
 
         anchors.fill: parent //anchor all sides of the mouse area to the rectangle's anchors  
                 //onClicked handles valid mouse button clicks  
         onClicked: console.log(buttonLabel.text + " clicked" )  
     }  
 }  

我們在simplebutton中包含了一個MouseArea元素。它描述了可以檢測到鼠標(biāo)移動的互動區(qū)域。對我們的按鈕，我們將整個MouseArea的anchors設(shè)置為它的parent，simplebutton。語法anchors.fill是訪問anchors屬性集中的特定的fill屬性的一種方式。QML使用基于anchor的布局，一個item可以anchor到另外一個上，創(chuàng)建健壯的布局。

鼠標(biāo)在 這個特定的MouseArea邊界內(nèi)移動時，MouseArea可以調(diào)用很多signal handlers。其中一個是onClicked，當(dāng)可接受的鼠標(biāo)按鈕被點(diǎn)下——默認(rèn)是左邊的按鍵，這個signal handler就會被調(diào)到。我們可以綁定動作到這個handler上。在我們的例子中，當(dāng)鼠標(biāo)區(qū)域被按下時，console.log()會輸出文字。console.log()函數(shù)對調(diào)試和輸出文字來說，都是一個有用的工具。

在屏幕上顯示一個按鈕來，并在鼠標(biāo)點(diǎn)擊時輸出文字，SimpleButton.qml中的代碼已經(jīng)足夠了。

CodeRectangle {  
     id: button  
     ...  
     property color buttonColor: "lightblue"  
     property color onHoverColor: "gold"  
     property color borderColor: "white"  
     signal buttonClick()  
     onButtonClick: {  
         console.log(buttonLabel.text + " clicked" )  
     }  
     MouseArea{  
         onClicked: buttonClick()  
         hoverEnabled: true  
         onEntered: parent.border.color = onHoverColor 
         onExited:  parent.border.color = borderColor 
     }  
     //determines the color of the button by using the conditional operator  
     color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor  
 }  

 Button.qml中是一個全功能的按鈕。本文中的代碼片段省略了一些代碼。這些代碼用省略號表示，它們要么已經(jīng)在前面的章節(jié)中介紹過了，要么與現(xiàn)在討論的代碼無關(guān)。 可以使用屬性 類型名字的語法來聲明自定義屬性。代碼中，聲明的buttonColor ，是一個color類型的屬性，并綁定了值“lightblue“。buttonColor 后來用到一個條件運(yùn)算中，決定按鈕的填充顏色。除了使用冒號將值綁定到屬性外，也可以使用等號賦值。自定義屬性可以被Rectangle范圍以外的內(nèi)部items訪問到。
 
基本的QML類型有int、string,、real, 還有variant。 綁定onEntered和onExited signal handlers 到colors上，當(dāng)鼠標(biāo)在按鈕上懸停時，按鈕的邊界會變成黃色；當(dāng)鼠標(biāo)退出鼠標(biāo)域時會變回原來的顏色。 把關(guān)鍵字signal 放到信號名字前面，Button.qml聲明了一個buttonClick() 信號。所有的信號都有自動生成的、名字以on開頭的handler。結(jié)果是，onButtonClick是buttonClick的handler。onButtonClick指定了要執(zhí)行的操作。我們的例子中，onClicked只會調(diào)用onButtonClick來顯示文字。

onButtonClick讓外部的對象很容易地訪問到Button的鼠標(biāo)區(qū)域。例如，items可能有多個MouseArea聲明，buttonClick信號可以更好地區(qū)分這幾個MouseArea的signal handlers之間。 在QML中實(shí)現(xiàn)item，并處理基本的鼠標(biāo)移動，這樣的基本知識我們已經(jīng)具備了。

我們在Rectangle中創(chuàng)建了aText標(biāo)簽，自定義它的屬性，實(shí)現(xiàn)了響應(yīng)鼠標(biāo)移動的行為。在這個文本編輯器程序中，我們會不停地重復(fù)在一個元素里創(chuàng)建領(lǐng)一個元素。 只有被用作執(zhí)行操作的組件，按鈕才有用處。在下面的章節(jié)中，我們很快就會創(chuàng)建一個菜單，包含幾個這樣的按鈕。

小結(jié)：詳解 Qt Quick 開始使用QML編程的內(nèi)容介紹完了，希望本文能幫你解決問題，想要更多資料請參考編輯推薦！