Qt Quick是本文要介紹的內容，主要是來了解Qt Quick的應用。Qt Quick (Qt User Interface Creation Kit)是一種高級用戶界面技術，開發(fā)人員和設計人員可用它協(xié)同創(chuàng)建動畫觸摸式用戶界面和應用程序。Qt Quick 包含 QtDeclarative C++ 模塊， QML(Qt Meta-Object Language)，以及它們集成到Qt Creator IDE中的部分。在Qt應用程序中通過使用QtDeclarativeC++模塊，程序可以方便地和QML文件進行交互。

QML是一種描述性的腳本語言，文件格式以.qml結尾。語法格式非常像CSS(參考后文具體例子)，但又支持javacript形式的編程控制。它結合了QtDesigner UI和QtScript的優(yōu)點。QtDesigner可以設計出.ui界面文件,但是不支

持和Qt原生C++代碼的交互。QtScript可以和Qt原生代碼進行交互，但是有一個缺點，如果要在腳本中創(chuàng)建一個繼承于QObject的圖形對象非常不方便，只能在Qt代碼中創(chuàng)建圖形對象，然后從QtScript中進行訪問。而QML可以在

腳本里創(chuàng)建圖形對象，并且支持各種圖形特效，以及狀態(tài)機等，同時又能跟Qt寫的C++代碼進行方便的交互，使用起來非常方便。

在Qt C＋＋文件中通過QDeclarativeView加載，就像使用UiLoader加載.ui文件一樣。

使用 Qt 做過 UI 后一定對 QHBoxLayout, QVBoxLayout, 和 QGridLayout 這三個最重要也最常使用的 layout managers 非常熟悉。
在 QML 中使用下列三種布局管理器：Row,、Column、Grid，以及使用 Anchor 進行布局。

QML 中的 Row 元素會將其子控件都排列在同一行，相互不重疊。我們還可以使用它的 spacing 屬性來定義子控件之間的距離。

QML 中的 Column 元素會將其子控件都排列在同一行，相互不重疊。我們可以使用它的 spacing 屬性來定義子控件之間的距離。

QML 中的 Grid 元素會將其子控件都均勻地排列在一個網(wǎng)格內，相互不重疊，每一個子控件都被放置在一個網(wǎng)格單元的（0，0）位置，也就是左上角。Grid的 rows 和 columns 屬性定義網(wǎng)格的行數(shù)和列數(shù)，列數(shù)默認是4。我們還可以使用 Grid 的spacing 屬性來定義網(wǎng)格單元之間的距離，這里注意水平和垂直方向的 spacing 都是一樣的。

Anchor

每一個 item 都可以被認為具有 7 條隱藏的“anchor lines"：left、 horizontalCenter、 right、 top、 verticalCenter、baseline、以及 bottom

其中 baseline 是指的文本所在的線，如果 item 沒有文字的話 baselinw 就和 top 的位置是相同的。除此之外，Anchor 系統(tǒng)還提供了margins 和 offsets。margins 是指一個 item 和外界之間所留有的空間，而 offsets 則可以通過使用 center anchor lines 來進行布局。

在Qt C＋＋文件中通過QDeclarativeView加載，就像使用UiLoader加載.ui文件一樣。

Item類是QML最基礎的類

組件其實和其它編程語言中的宏，函數(shù)，類，結構體等功能差不多，就是代碼復用。

組件由一個單獨的QML文件名組成，文件名總是以大寫字母開頭，要使用該組件的時候直接使用該文件名就可以了。Item是最常使用的QML類型，一般用作其它類型的容器，可以理解成最頂級的父類，功能類似于QtGui中的QWidget。

MouseArea則為Item增加了一塊鼠標響應區(qū)，在鼠標活動區(qū)，都能偵聽到鼠標事件。

onClicked那一行則相當于為鼠標單擊事件增加了一個處理行為

Component的語法規(guī)則，如果你在Cell.qml里定義的是clicked(),那么你在main.qml中引用的時候就該用onClicked()了。 然后由“when”指 定了什么時候觸發(fā)這個狀態(tài)PropertyChanges則指定了哪個元素的哪些屬性會發(fā)生什么樣的變化。

transitions 是用于增加動畫效果的

“from”和”to”指明了當前的動畫作用于哪兩個狀態(tài)變化之間。 “from”和”to”的參數(shù)名來自于State中的”name”屬性。

ParalleAnimation則指定了有多個 有多個動畫并行發(fā)生。NumberAnimation用于qreal類型的屬性變化,ColorAnimation則用于顏色變化。

小結：Qt Quick簡單學習教程的內容介紹完了，希望通過本文的學習能對你有所幫助！