自 QML 第一次發布已經過去一年多的時間，但在企業應用領域，QML 一直沒有能夠占據一定地位。很大一部分原因是，QML 缺少一些在企業應用中亟需的組件，比如按鈕、菜單等。雖然移動領域，這些組件已經變得可有可無，但在桌面系統中依然不可或缺。為了解決這一問題，Qt 5.1 發布了 Qt Quick 的一個全新模塊：Qt Quick Controls。顧名思義，這個模塊提供了大量類似 Qt Widgets 模塊那樣可重用的組件。本章我們將介紹 Qt Quick Controls，你會發現這個模塊與 Qt 組件非常類似。
為了開發基於 Qt Quick Controls 的程序，我們需要創建一個 Qt Quick Application 類型的應用程序，選擇組件集的時候注意選擇 Qt Quick Controls 即可：
注意，Qt Creator 給出的是 Qt Quick Controls 1.0，而最新版本的 Qt 5.2 搭載的 Qt Quick Controls 是 1.1。1.1 比 1.0 新增加了一些組件，比如BusyIndicator等。所以，如果你發現某個組件找不到，記得更新下 Qt Quick Controls 的版本。
Qt Quick Controls 1.1 提供了多種組件：
| 應用程序窗口 | |
| 用於描述應用程序的基本窗口屬性的組件 | |
| ApplicationWindow | 對應QMainWindow，提供頂層應用程序窗口 |
| MenuBar | 對應QMenuBar，提供窗口頂部橫向的菜單欄 |
| StatusBar | 對應QStatusBar，提供狀態欄 |
| ToolBar | 對應QToolBar，提供工具欄，可以添加ToolButton和其它組件 |
| Action | 對應QAction，提供能夠綁定到導航和視圖的抽象的用戶界面動作 |
| 導航和視圖 | |
| 方便用戶在一個布局中管理和顯示其它組件 | |
| ScrollView | 對應QScrollView，提供滾動視圖 |
| SplitView | 對應QSplitter，提供可拖動的分割視圖布局 |
| StackView | 對應QStackedWidget，提供基於棧的層疊布局 |
| TabView | 對應QTabWidget，提供帶有標簽的基於棧的層疊布局 |
| TableView | 對應QTableWidget，提供帶有滾動條、樣式和表頭的表格 |
| 控件 | |
| 控件用於表現或接受用戶輸入 | |
| BusyIndicator | 提供忙等示意組件 |
| Button | 對應QPushButton，提供按鈕組件 |
| CheckBox | 對應QCheckBox，提供復選框 |
| ComboBox | 對應QComboBox，提供下拉框 |
| GroupBox | 對應QGroupBox，提供帶有標題、邊框的容器 |
| Label | 對應QLabel，提供標簽組件 |
| ProgressBar | 對應QProgressBar，提供進度條組件 |
| RadioButton | 對應QRadioButton，提供單選按鈕 |
| Slider | 對應QSlider，提供滑動組件 |
| SpinBox | 對應QSpinBox，提供微調組件 |
| Switch | 提供類似單選按鈕的開關組件 |
| TextArea | 對應QTextEdit，提供能夠顯示多行文本的富文本編輯框 |
| TextField | 對應QTextLine，提供顯示單行文本的純文本編輯框 |
| ToolButton | 對應QToolButton，提供在工具欄上顯示的工具按鈕 |
| ExclusiveGroup | 提供互斥 |
| 菜單 | |
| 用於構建菜單的組件 | |
| Menu | 對應QMenu，提供菜單、子菜單、彈出菜單等 |
| MenuSeparator | 提供菜單分隔符 |
| MenuItem | 提供添加到菜單欄或菜單的菜單項 |
| StatusBar | 對應QStatusBar，提供狀態欄 |
| ToolBar | 對應QToolBar，提供工具欄，可以添加ToolButton和其它組件 |
我們嘗試實現一個編輯器。這是一個簡單的文本編輯器，具有新建、剪切、復制和粘貼等操作。程序運行出來效果如下：
整個程序都是在 IDE 幫我們生成的 main.qml 中實現的。首先我們需要添加import語句：
|
1
2
|
import QtQuick 2.1
import QtQuick.Controls 1.1
|
注意我們修改了 IDE 生成的默認語句。整個 QML 文檔的根元素是ApplicationWindow：
|
1
2
3
4
5
6
|
ApplicationWindow {
title: qsTr("Simple Editor")
width: 640
height: 480
...
}
|
ApplicationWindow是應用程序的主窗口，類似QMainWindow，提供了很多預定義的功能，比如菜單、工具欄等。代碼里面的qsTr()函數類似tr()函數，用於以后的國際化。所有面向用戶的文本都應該使用這個函數。
下面向ApplicationWindow中添加控件：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
menuBar: MenuBar {
Menu {
title: qsTr("&File")
MenuItem { action: newAction }
MenuItem { action: exitAction }
}
Menu {
title: qsTr("&Edit")
MenuItem { action: cutAction }
MenuItem { action: copyAction }
MenuItem { action: pasteAction }
MenuSeparator {}
MenuItem { action: selectAllAction }
}
}
toolBar: ToolBar {
Row {
anchors.fill: parent
ToolButton { action: newAction }
ToolButton { action: cutAction }
ToolButton { action: copyAction }
ToolButton { action: pasteAction }
}
}
TextArea {
id: textArea
anchors.fill: parent
}
|
首先看最后面的TextArea，這是整個窗口的主要控件，類似於setCentralWidget()函數調用。
menuBar和toolBar兩個屬性都是ApplicationWindow提供的屬性。
menuBar是MenuBar類型的，所以我們創建一個新的MenuBar控件。MenuBar具有層次結構，這是通過Menu的嵌套實現的。每一個菜單項都是用MenuItem實現的；菜單項之間的分隔符則使用MenuSeparator控件。這點與 QtWidgets 有所不同。
toolBar是Item類型的，不過通常都會使用ToolBar控件。ToolBar默認沒有提供布局，因此我們必須給它設置一個布局。這里我們直接添加了一個Row，作為橫向工具欄的布局。這個工具欄要橫向充滿父窗口，因此設置錨點為anchors.fill: parent。雖然我們設置的是充滿整個父窗口，但是工具欄的行為是，如果其中只有一個子元素（比如這里的Row），那么工具欄的高度將被設置為這個子元素的implicitHeight屬性。這對結合布局使用非常有用。事實上，這也是工具欄最常用的方法。工具欄中添加了四個按鈕，都是ToolButton類型。
每一個MenuItem和ToolButton都添加了一個action屬性。下面是這部分代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
Action {
id: exitAction
text: qsTr("E&xit")
onTriggered: Qt.quit()
}
Action {
id: newAction
text: qsTr("New")
iconSource: "images/new.png"
onTriggered: {
textArea.text = "";
}
}
Action {
id: cutAction
text: qsTr("Cut")
iconSource: "images/cut.png"
onTriggered: textArea.cut()
}
Action {
id: copyAction
text: qsTr("Copy")
iconSource: "images/copy.png"
onTriggered: textArea.copy()
}
Action {
id: pasteAction
text: qsTr("Paste")
iconSource: "images/paste.png"
onTriggered: textArea.paste()
}
Action {
id: selectAllAction
text: qsTr("Select All")
onTriggered: textArea.selectAll()
}
|
Action類似QAction。這里我們還是使用qsTr()函數設置其顯示的文本。
使用iconSource屬性可以指定圖標。注意這里的圖標只能是位於文件系統中的，不能加載資源文件中的圖標（當然，這並不是絕對的。如果我們將整個 QML 文檔放在資源文件中，那么就可以直接加載資源文件中的圖標。我們會在后面的章節詳細介紹這種技術。）。當我們直接類似“images/new.png”這種路徑時，注意 QML 是運行時解釋的，因此這個路徑是相對與 QML 文件的路徑。所以這里的圖標需要放在與 main.qml 文件同目錄下的 images 目錄中。
onTriggered屬性是一種信號處理函數，后面可以添加 JavaScript 語句。如果是多條語句，可以使用大括號，例如newAction的onTriggered。QML 組件可以發出信號。與 C++ 不同的是，QML 組件的信號並不需要特別的連接語句，而是使用”on信號名字”的形式。比如，Action有一個名為triggered的信號，則其信號處理函數即為onTriggered。事實上，這是最簡單的一種信號槽的實現。不過，這種實現的困難在於，同一個信號只能有一個固定名字的信號處理函數。不過，我們也可以使用 connect 連接語句。后面的章節中將詳細介紹這一點。
至此，我們的編輯器便實現了。由於全部使用了TextArea提供的功能，所以代碼很簡單。不過，復雜的程序都是這些簡單的元素堆積而成，所以，我們現在只是簡單介紹，具體的控件使用還要根據文檔仔細研究。