自 QML 第一次发布已通过去一年多的时间，但在企业应用领域，QML 一直没有可以占据必定地位。很大一部分缘由是，QML 缺乏一些在企业应用中亟需的组件，好比按钮、菜单等。虽然移动领域，这些组件已经变得无关紧要，但在桌面系统中依然不可或缺。为了解决这一问题，Qt 5.1 发布了 Qt Quick 的一个全新模块：Qt Quick Controls。顾名思义，这个模块提供了大量相似 Qt Widgets 模块那样可重用的组件。本章咱们将介绍 Qt Quick Controls，你会发现这个模块与 Qt 组件很是相似。git
为了开发基于 Qt Quick Controls 的程序，咱们须要建立一个 Qt Quick Application 类型的应用程序，选择组件集的时候注意选择 Qt Quick Controls 便可：github
注意，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 提供了多种组件：ide
| 应用程序窗口 | |
| 用于描述应用程序的基本窗口属性的组件 | |
| 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()函数，用于之后的国际化。全部面向用户的文本都应该使用这个函数。post
下面向ApplicationWindow中添加控件：ui
|
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()函数调用。spa
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提供的功能，因此代码很简单。不过，复杂的程序都是这些简单的元素堆积而成，因此，咱们如今只是简单介绍，具体的控件使用还要根据文档仔细研究。