Hello Qt（五十一）———Qt Quick Controls
一、Qt Quick Controls基础
QT5.1发布了Qt Quick的一个全新模块：Qt Quick Controls。Qt Quick Controls模块提供了大量类似Qt Widgets模块的可重用组件。
为了开发基于Qt Quick Controls的程序，需要创建一个Qt Quick Application类型的应用程序，选择组件集的时候注意选择Qt Quick Controls。
二、Qt Quick Controls组件
Qt Quick Controls 提供了多种组件。
1、应用程序窗口
应用程序窗口是用于描述应用程序的基本窗口属性的组件。
| ApplicationWindow | 对应QMainWindow，提供顶层应用程序窗口 |
| MenuBar | 对应QMenuBar，提供窗口顶部横向的菜单栏 |
| StatusBar | 对应QStatusBar，提供状态栏 |
| ToolBar | 对应QToolBar，提供工具栏，可以添加ToolButton和其它组件 |
| Action | 对应QAction，提供能够绑定到导航和视图的抽象的用户界面动作 |
2、导航与视图
便于用户在一个布局中管理和显示其它组件
| ScrollView | 对应QScrollView，提供滚动视图 |
| SplitView | 对应QSplitter，提供可拖动的分割视图布局 |
| StackView | 对应QStackedWidget，提供基于栈的层叠布局 |
| TabView | 对应QTabView，提供带有标签的基于栈的层叠布局 |
| TableView | 对应QTableView，提供带有滚动条、样式和表头的表格 |
| TreeView | 对应QTreeView，提供带有滚动条、样式和表头的表格 |
3、控件
控件用于控件用于表现或接受用户输入
| 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 | 提供互斥 |
4、菜单
用于构建菜单的组件
| Menu | 对应QMenu，提供菜单、子菜单、弹出菜单等 |
| MenuSeparator | 提供菜单分隔符 |
| MenuItem | 提供添加到菜单栏或菜单的菜单项 |
| StatusBar | 对应QStatusBar，提供状态栏 |
| ToolBar | 对应QToolBar，提供工具栏，可以添加ToolButton和其它组件 |
三、Qt Quick Controls应用程序实例
Main.qml文件：
import QtQuick 2.6
import QtQuick.Controls 1.4
ApplicationWindow
{
title: qsTr("NotePad")
width: 640
height: 480
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()
}
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
}
}ApplicationWindow是应用程序的主窗口，提供了很多预定义的功能，比如菜单、工具栏等。qsTr()函数类似于tr()函数，用于国际化。
menuBar和toolBar两个属性都是ApplicationWindow提供的属性。menuBar是MenuBar类型的。MenuBar具有层次结构，是通过Menu的嵌套实现的。每一个菜单项都是用MenuItem实现的；菜单项之间的分隔符则使用MenuSeparator控件。
toolBar是Item类型的，通常都会使用ToolBar控件。ToolBar默认没有提供布局，必须给它设置一个布局。直接添加了一个Row，作为横向工具栏的布局。工具栏要横向充满父窗口，设置锚点为anchors.fill: parent。虽然ToolBar设置的是充满整个父窗口，但如果ToolBar只有一个子元素（比如这里的Row），那么工具栏的高度将被设置为子元素的implicitHeight属性，这对结合布局使用非常有用。
每一个MenuItem和ToolButton都添加了一个action属性。
使用iconSource属性可以指定图标。图标只能是位于文件系统中的，不能加载资源文件中的图标（如果将整个QML文档放在资源文件中，就可以直接加载资源文件中的图标）。当直接使用“images/new.png”路径时，注意QML是运行时解释的，这个路径是相对于QML文件的路径。图标需要放在与main.qml文件同目录下的images目录中。
onTriggered属性是一种信号处理函数，后面可以添加JavaScript 语句。如果是多条语句，可以使用大括号，例如newAction的onTriggered。QML组件可以发出信号，与C++不同的是，QML组件的信号并不需要特别的连接语句，而是使用“on信号名字”的形式。Action有一个名为triggered的信号，则其信号处理函数即为onTriggered。这种简单的信号槽实现的局限在于同一个信号只能有一个固定名字的信号处理函数。当然，也可以使用 connect 连接语句。