目录
简介
前一节介绍了什么是QML以及如何创建一个简单的QML应用程序,创建步骤和一些创建过程中的注意事项。本节开始介绍用QtQuick 控件创建应用程序。
使用控件创建QML应用程序
Qt Quick提供基本的图形元素,Qt Quick Controls提供了现成的QML类型供应用程序使用。我们先来了解一下Qt Quick Controls提供的各种QML类型,我们可以在应用程序中使用以下导入语句将Qt Quick Controls QML类型可以导入到我们的“xxx.qml”文件中:
import QtQuick.Controls 2.13
QML 类型
AbstractButton——提供按钮通用功能的抽象基类型 。
Action——抽象用户界面动作。
ActionGroup——放在一起的一组动作。
ApplicationWindow——支持页眉和页脚的样式化顶级窗口。
BusyIndicator——忙碌指示器,指示后台活动,例如,在加载内容时。
Button——按钮,可以点击执行命令或回答一个问题。
ButtonGroup——相互排斥的一组可选按钮。
CheckBox——检查按钮,可以开关。
CheckDelegate——带有可以打开或关闭检查指示器的项代理。
ComboBox——组合按钮和弹出列表选择选项。
Container——提供容器通用功能的抽象基类型。
Control——提供所有控件通用功能的抽象基类型。
DelayButton——按下足够长时间后触发的检查按钮。
Dial——旋转以设置值的圆形刻度盘。
Dialog——带有标准按钮和标题的弹出对话框,用于与用户进行短期交互。
DialogButtonBox——对话框中使用的按钮框。
Drawer——可以使用一个滑动手势打开和关闭的侧边面板。
Frame——带可视框架的逻辑控件组。
GroupBox——带可视框架和标题的逻辑控件组。
ItemDelegate——可用于各种视图和控件的基本项代理。
Label——带有继承字体的样式化文本标签。
Menu——可以用作上下文菜单或弹出菜单的弹出菜单。
MenuBar——提供一个窗口菜单栏。
MenuBarItem——在菜单栏中显示下拉菜单。
MenuItem——在菜单中的显示项。
MenuSeparator——将菜单中的一组项与相邻的项分开。
Overlay——弹出窗口的覆盖。
Page——具有页眉和页脚支持的样式化页控件。
PageIndicator——页指示器,指示当前活动的页。
Pane——提供与应用程序样式和主题匹配的背景。
Popup——类弹出式用户界面控件的基本类型。
ProgressBar——进度条,指示操作的进度。
RadioButton——唯一的单选按钮,可以开关。
RadioDelegate——互斥项委托,带有一个可以打开或关闭的唯一指示器。
RangeSlider——用于通过沿轨道滑动两个手柄来选择范围内的值。
RoundButton——具有可由用户单击的圆角按钮控件。
ScrollBar——垂直或水平交互式滚动条。
ScrollIndicator——垂直或水平非交互式滚动指示器。
ScrollView——可滚动视图。
Slider——通过沿轨道滑动手柄来选择一个值。
SpinBox——允许用户从一组预置值中进行选择。
SplitHandle——为SplitView句柄提供附加属性。
SplitView——在每个项目之间放置一个可拖动的拆分器。
StackView——提供基于堆栈的导航模型。
SwipeDelegate——可滑动的项委托。
SwipeView——使用户能够通过横向滑动来浏览页面。
Switch——可以开关的按钮。
SwitchDelegate——带有开关指示器的项委托,该开关指示器可被打开或关闭。
TabBar——允许用户在不同的视图或子任务之间切换。
TabButton——一个看起来适合TabBar的按钮。
TextArea——多行文本输入区。
TextField——单行文本输入区。
ToolBar——上下文敏感控件的容器。
ToolButton——一个看起来适合ToolBar的按钮。
ToolSeparator——将工具栏中的一组项与相邻的项分隔开。
ToolTip——为任何控件提供工具提示。
Tumbler——可以选择的可旋转的项目轮。
我们可以插入ApplicationWindow类型作为创建应用程序的起点。一个应用程序UI有这样的基本布局:
在每个区域内,可以添加和连接不同的控件以形成应用程序。例如,下面的代码片段是演示如何使用可用空间的基本应用程序:
//导入相关模块
import QtQuick 2.12
import QtQuick.Controls 2.12
//包含应用程序的窗口
ApplicationWindow {
//程序的标题
title: qsTr("Hello World")
width: 640
height: 480
//包含菜单中的两个菜单项
menuBar: MenuBar {
Menu {
title: qsTr("File")
MenuItem {
text: qsTr("&Open")
onTriggered: console.log("Open action triggered");
}
MenuItem {
text: qsTr("Exit")
onTriggered: Qt.quit();
}
}
}
//内容区
//放一个按钮在内容区中心
Button {
text: qsTr("Hello World")
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
}
应用程序有两个菜单项,中间有一个按钮。单击Exit菜单项将关闭应用程序。
Qt Quick 布局
Qt快速布局是一组QML类型,用于在用户界面中安排项目。与定位器不同,Qt快速布局还可以调整项目大小。这使得它们非常适合可调整大小的用户界面。由于布局是项,因此它们可以嵌套。通常应用程序和布局是密不可分的,QML中提供了五种布局,导入方式:
import QtQuick.Layouts 1.3
ColumnLayout ——与GridLayout相同,但只有一个列。
GridLayout——提供在网格中动态排列项的方法。
Layout——为压入GridLayout、RowLayout或ColumnLayout的项提供附加属性。
RowLayout——与GridLayout相同,但只有一行。
StackLayout——一次只能显示一项的项的堆栈。
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.3
ApplicationWindow {
visible: true
title: "Basic layouts"
property int margin: 11
width: mainLayout.implicitWidth + 2 * margin
height: mainLayout.implicitHeight + 2 * margin
minimumWidth: mainLayout.Layout.minimumWidth + 2 * margin
minimumHeight: mainLayout.Layout.minimumHeight + 2 * margin
ColumnLayout {
id: mainLayout
anchors.fill: parent
anchors.margins: margin
GroupBox {
id: rowBox
title: "Row layout"
Layout.fillWidth: true
RowLayout {
id: rowLayout
anchors.fill: parent
TextField {
placeholderText: "This wants to grow horizontally"
Layout.fillWidth: true
}
Button {
text: "Button"
}
}
}
GroupBox {
id: gridBox
title: "Grid layout"
Layout.fillWidth: true
GridLayout {
id: gridLayout
rows: 3
flow: GridLayout.TopToBottom
anchors.fill: parent
Label { text: "Line 1" }
Label { text: "Line 2" }
Label { text: "Line 3" }
TextField { }
TextField { }
TextField { }
TextArea {
text: "This widget spans over three rows in the GridLayout.\n"
+ "All items in the GridLayout are implicitly positioned from top to bottom."
Layout.rowSpan: 3
Layout.fillHeight: true
Layout.fillWidth: true
}
}
}
TextArea {
id: t3
text: "This fills the whole cell"
Layout.minimumHeight: 30
Layout.fillHeight: true
Layout.fillWidth: true
}
GroupBox {
id: stackBox
title: "Stack layout"
implicitWidth: 200
implicitHeight: 60
Layout.fillWidth: true
Layout.fillHeight: true
StackLayout {
id: stackLayout
anchors.fill: parent
function advance() { currentIndex = (currentIndex + 1) % count }
Repeater {
id: stackRepeater
model: 5
Rectangle {
color: Qt.hsla((0.5 + index)/stackRepeater.count, 0.3, 0.7, 1)
Button { anchors.centerIn: parent; text: "Page " + (index + 1); onClicked: { stackLayout.advance() } }
}
}
}
}
}
}
上面示例展示了如何使用GridLayout、RowLayout和ColumnLayout轻松地将UI组件安排到布局中。 运行结果如下:
小结
QML的控件和QWidget中的使用有相似之处,布局也是如此。但是QML控件提供的功能更加便于各种界面效果的实现,各种控件搭配可以做出炫酷的界面动画效果。下一节继续对各控件进行具体的使用与探索。