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.6import QtQuick.Controls 1.4ApplicationWindow
{title: qsTr("NotePad")width: 640height: 480Action{id: exitActiontext: qsTr("E&xit")onTriggered: Qt.quit()}Action{id: newActiontext: qsTr("New")iconSource: "images/new.png"onTriggered:{textArea.text = "";}}Action{id: cutActiontext: qsTr("Cut")iconSource: "images/cut.png"onTriggered: textArea.cut()}Action{id: copyActiontext: qsTr("Copy")iconSource: "images/copy.png"onTriggered: textArea.copy()}Action{id: pasteActiontext: qsTr("Paste")iconSource: "images/paste.png"onTriggered: textArea.paste()}Action{id: selectAllActiontext: 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: parentToolButton { action: newAction }ToolButton { action: cutAction }ToolButton { action: copyAction }ToolButton { action: pasteAction }}}TextArea{id: textAreaanchors.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 连接语句。