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

Getting Started Programming with QML

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

Installation

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

QML to Build User Interfaces

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

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

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

定義一個按鈕和一個菜單

基本組件： 一個按鈕

我們先從生成一個按鈕開始。功能上來說，一個按鈕有一個鼠標敏感性區域和一個標簽。當用戶按下，按鈕執行動作。

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

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

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

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

我們可以使用QML的事件處理來實現按鈕的點擊功能。QML的事件處理與Qt的signal slot機制非常類似。發出signals，連接到的slots就被調用。

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元素。它描述了可以檢測到鼠標移動的互動區域。對我們的按鈕，我們將整個MouseArea的anchors設置為它的parent，simplebutton。語法anchors.fill是訪問anchors屬性集中的特定的fill屬性的一種方式。QML使用基于anchor的布局，一個item可以anchor到另外一個上，創建健壯的布局。

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

在屏幕上顯示一個按鈕來，并在鼠標點擊時輸出文字，SimpleButton.qml中的代碼已經足夠了。

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

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

我們在Rectangle中創建了aText標簽，自定義它的屬性，實現了響應鼠標移動的行為。在這個文本編輯器程序中，我們會不停地重復在一個元素里創建領一個元素。 只有被用作執行操作的組件，按鈕才有用處。在下面的章節中，我們很快就會創建一個菜單，包含幾個這樣的按鈕。

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