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

Getting Started Programming with QML

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

Installation

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

QML to Build User Interfaces

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

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

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

定義一個(gè)按鈕和一個(gè)菜單

基本組件： 一個(gè)按鈕

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

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)入我們后來會(huì)用到的QML元素。每一個(gè)QML文件都必須有這行。注意，import語句中包含了Qt模塊的版本。

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

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

我們將代碼保存為SimpleButton.qml。將這個(gè)文件作為參數(shù)傳給qmlviewer，就會(huì)顯示出一個(gè)帶文本標(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" )  
     }  
 }  

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

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

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

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

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

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