QT5.1 发布了 Qt Quick 的一个全新模块:Qt Quick Controls。Qt Quick Controls 模块提供了大量类似 Qt Widgets 模块的可重用组件。
为了开发基于 Qt Quick Controls 的程序,需要创建一个 Qt Quick Application 类型的应用程序,选择组件集的时候注意选择 Qt Quick Controls。
Qt Quick Controls 提供了多种组件。
应用程序窗口是用于描述应用程序的基本窗口属性的组件。
ApplicationWindow | 对应 QMainWindow,提供顶层应用程序窗口 |
MenuBar | 对应 QMenuBar,提供窗口顶部横向的菜单栏 |
StatusBar | 对应 QStatusBar,提供状态栏 |
ToolBar | 对应 QToolBar,提供工具栏,可以添加 ToolButton 和其它组件 |
Action | 对应 QAction,提供能够绑定到导航和视图的抽象的用户界面动作 |
便于用户在一个布局中管理和显示其它组件
控件用于控件用于表现或接受用户输入
用于构建菜单的组件
Menu | 对应 QMenu,提供菜单、子菜单、弹出菜单等 |
MenuSeparator | 提供菜单分隔符 |
MenuItem | 提供添加到菜单栏或菜单的菜单项 |
StatusBar | 对应 QStatusBar,提供状态栏 |
ToolBar | 对应 QToolBar,提供工具栏,可以添加 ToolButton 和其它组件 |
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 连接语句。
来源: