QT6学习第十一天 Qt Quick控件 Control

Qt Quick控件

Qt Quick本身是为了移动触摸界面而生的，但Qt的跨平台性也决定了它需要支持多种系统。为了支持桌面平台开发，从Qt 5.1开始，增加了新的Qt Quick Controls模块来提供一些现成的控件。其后该模块又提供了对移动和嵌入式平台的支持。

Qt Quick Controls模块是Qt Quick模块的子模块，包含了一组丰富的UI控件，迎合了最常见的用例，并且提供了定制选项，可用于在Qt Quick中构建完整的应用界面。

使用Qt Quick Controls模块，需要导入import QtQuick.Controls
在 pro 文件中需添加 QT += quickcontrols2

控件基类 Control

Control 是用户界面控件的基类型。Qr Quick Controls 模块中的大部分控件都继承自 Control，而 Control 继承自 Item，一般不直接使用该类型，而是使用它的众多子控件类型。Control 从窗口系统接收输入事件并在屏幕上绘制自身，一个典型的 Control 控件布局像这样。

看一个例子

import QtQuick
import QtQuick.ControlsWindow{width:300;height:200visible:trueRectangle{x:100;y:100;width:50;height:40color:"red"Control{width:40;height:30//Insets属性，设置控件背景，不影响控件的视觉外观的情况下扩展其可交互区域，这对于较小的控件非常有用topInset:-2;leftInset:-2;rightInset:-6;bottomInset:-6background:Rectangle{color:"green"}contentItem:Rectangle{color:"yellow"}toPadding:5;leftPadding:2}}
}

上面代码可以理解为，你在 window 里创建了一个 Rectangle，在Rectangle里又布局了几个区域，然后在 Rectangle 里布局这几个区域。

Qt Quick Controls 模块中常用的控件有十类。
按钮类、容器类、委托类、指示器类、输入类、菜单类、导航类、弹出类、分隔类、日期类。

按钮类控件

Qt Quick Controls模块提供了一组按钮类控件，包括AbstractButton及其子孙类型Button、CheckBox、DelayButton、RadioButton、RoundButton、Switch和ToolButton等，每种类型的按钮都有自己的特定用例。

• AbstractButton 为具有类似按钮行为的控件提供界面，它是一个抽象控件，提供了按钮通用的功能，但本身无法直接使用。
• Button 类型实现了一个通用的按钮控件，一般用来执行一个动作或者回答一个问题，比如“确定”​“取消”等
• RoundButton 作为Button的子类型，在其基础上添加了一个radius属性，可以创建圆形按钮。

import QtQuick
import QtQuick.Controls
import QtQuick.LayoutsWindow {width: 350; height: 200; visible: true//RowLayout 是一种布局方式RowLayout {anchors.fill: parent; spacing: 10Button { text: qsTr("普通按钮"); onClicked: close() }Button { text: qsTr("flat按钮"); flat: true }Button { text: qsTr("高亮按钮"); highlighted: true }RoundButton { text: qsTr("圆角按钮"); radius: 5 }RoundButton { text: qsTr("圆形按钮"); implicitWidth: 60;implicitHeight: 60; radius: width / 2 }}
}

• CheckBox 复选框用来创建一个选项按钮，可以在“选中”和“未选中”两种状态间切换。复选框通常用于从一组选项中选择一个或多个选项，对于更大的选项集，例如列表中的选项，可以参考使用CheckDelegate。
• RadioButton 单选按钮通常用于从一组选项中选择一个选项。
• ButtonGroup 可以包含一组互斥的按钮，该控件本身是不可见的，一般与RadioButton等控件一起使用。如果需要ButtonGroup中的按钮不再互斥，可以设置exclusive属性为false。使用 ButtonGroup 的最直接方式是为其buttons属性添加按钮列表，例如 buttons: column.children，但是如果 column 的子对象不全是按钮，那么可以使用另一种方式，通过ButtonGroup.group 附加属性单独为每一个按钮指定按钮组。

import QtQuick
import QtQuick.Controls
import QtQuick.LayoutsWindow {width: 350; height: 200; visible: trueColumnLayout {ButtonGroup {id: childGroupexclusive: false; checkState: parentBox.checkState}CheckBox {id: parentBox;text: qsTr("Parent"); checkState: childGroup.checkState}CheckBox {checked: true; text: qsTr("Child 1")leftPadding: indicator.width; ButtonGroup.group: childGroup}CheckBox {text: qsTr("Child 2"); leftPadding: indicator.widthButtonGroup.group: childGroup}}
}

这里有3个 CheckBox，后面两个添加到了一个 ButtonGroup中。对于一个按钮组，只有所有按钮都处于 Qt.Checked 状态，该按钮组才处于“选中”状态，所以这里将第一个CheckBox与ButtonGroup的checkState进行双向绑定，这样只有当后面两个CheckBox同时选中时，第一个CheckBox才会被选中，而如果手动选中第一个CheckBox，那么其他两个CheckBox也会同时被选中。

• DelayButton 是一个可被选中的按钮，在被选中并发出activated()信号之前，有一个延迟，用来防止意外按压。可以通过transition属性来自定义过渡动画。
• Switch 开关按钮可以在“打开”和“关闭”之间进行切换，该按钮通常用于在两种状态之间进行选择，对于更大的选项集，例如列表中的选项，可以改用SwitchDelegate。

import QtQuick
import QtQuick.Controls
import QtQuick.LayoutsWindow {width: 350; height: 200; visible: trueRowLayout {DelayButton {text: qsTr("延迟按钮"); delay: 5000onActivated: text = qsTr("已启动")}Switch {text: qsTr("Wi-Fi")onToggled: console.log(checked)}}
}

指示器类控件

Qt Quick Controls 模块提供的指示器类控件有 BusyIndicator、PageIndicator、ProgressBar、ScrollBar和ScrollIndicator等，它们均直接继承自Control。

• PageIndicator 一般与 StackLayout 这样包含多个页面的容器控件一起使用来指示当前的活动页面；而 ScrollBar 和 ScrollIndicator 一般用于 Flickable 及其子类型，用于显示滚动条和滚动位置。
• BusyIndicator 用来显示一个忙碌指示器控件，可以指示正在加载内容或UI被阻止需等待资源等情况。该类型自身只有一个running属性，在需要等待的情况下将其设置为true即可。
• ProgressBar 用来显示一个进度条指示器控件，可以指示操作的进度。

输入类控件

输入类控件有 ComboBox、Dial、RangeSlider、Slider、TextArea、TextField、Tumbler和SpinBox等。

• ComboBox
  ComboBox继承自Control，是一个组合按钮和弹出列表的组合框控件，提供了一种以占用最小屏幕空间的方式向用户呈现选项列表的方法。

import QtQuick
import QtQuick.Controls
import QtQuick.LayoutsWindow {width: 350; height: 200; visible: trueItem {width: 200; height: 300ComboBox {editable: truemodel: ListModel {id: modelListElement { text: "Banana" }ListElement { text: "Apple" }ListElement { text: "Coconut" }}onAccepted: {if (find(editText) === -1)model.append({text: editText})}}}}

• Dial
  Dial继承自Control，实现类似于传统的音响上拨号旋钮样式的控件，可以用来指定范围内的值。

Item {width: 100; height: 120Dial {id: dialfrom: 1; to: 10stepSize: 1; wrap: true}Label {anchors.top: dial.bottomtext: dial.value}
}

• RangeSlider、Slider
  RangeSlider 继承自Control，用于通过沿轨迹滑动两个控制柄来选择由两个值指定的范围。

RangeSlider {from: 1; to: 100first.value: 25; second.value: 75first.onMoved: console.log(first.value + "," + second.value)second.onMoved: console.log(first.value + "," + second.value)
}

Slider也继承自Control，用于通过沿轨迹滑动控制柄来选择值。该控件与RangeSlider很相似，不过只有一个控制柄。

Slider {from: 1; to: 100; value: 25; stepSize: 10onMoved: console.log(value)
}

• TextArea、TextField
  TextArea 继承自 TextEdit，提供了一个多行文本编辑器，在TextEdit 之上添加了占位符文本功能，并进行了一些装饰。
  TextField 继承自 TextInput，提供了一个单行文本编辑器，在TextInpu 基础上添加了占位符文本功能，并添加了一些装饰，可以通过background属性来指定背景项目。

   Item {width: 200; height: 300ScrollView {id: viewanchors.fill: parentTextArea {background:Rectangle{color:"blue"}placeholderText: qsTr("可以在这里输入内容")wrapMode: Text.WordWrap}}TextField {background: Rectangle {color: "red"}placeholderText: qsTr("Enter name")onAccepted: console.log(text)}}

• Tumbler、SpinBox
  Tumbler 继承自Control，用于从可旋转的项目“转轮”中选择一个选项。该控件提供了现成的数据选项，不需要使用键盘输入，而当有大量项目时，它可以首尾相连，这些特性让该控件非常实用。

import QtQuick
import QtQuick.ControlsWindow {visible: truewidth: frame.implicitWidth + 10height: frame.implicitHeight + 10function formatText(count, modelData) {var data = count === 12 ? modelData + 1 : modelData;return data.toString().length < 2 ? "0" + data : data;}Component {id: delegateComponentLabel {text: formatText(Tumbler.tumbler.count, modelData)opacity: 1.0 - Math.abs(Tumbler.displacement)/ (Tumbler.tumbler.visibleItemCount / 2)horizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenter}}Frame {id: frameanchors.centerIn: parent; padding: 0Row {id: rowTumbler {id: hoursTumblermodel: 12; delegate: delegateComponent}Tumbler {id: minutesTumblermodel: 60; delegate: delegateComponent}Tumbler {id: amPmTumblermodel: ["AM", "PM"]; delegate: delegateComponent}}}
}

这里创建了3个Tumbler，使用了相同的委托，但是数据模型不同。委托使用的是一个Label，主要设置了文本text和不透明度opacity属性，这里的Tumbler.displacement附加属性的取值范围为−visibleItemCount / 2到visibleItemCount / 2，就是视图可见的项目离视图中间的当前项目的距离，当前项目的该属性值为0。

SpinBox继承自Control，允许用户通过单击向上或向下指示器按钮，或通过键盘向上或向下方向键来选择整数值。尽管SpinBox默认只可以处理整数值，通过validator、textFromValue和valueFromText等属性也可以自定义让其接受任意输入值。

import QtQuick
import QtQuick.ControlsWindow {visible: truewidth: frame.implicitWidth + 10height: frame.implicitHeight + 10SpinBox {id: spinBoxfrom: 0; to: items.length - 1value: 1 // "Medium"property var items: ["Small", "Medium", "Large"]validator: RegularExpressionValidator {regularExpression: new RegExp("(Small|Medium|Large)", "i")}textFromValue: function(value) {return items[value];}valueFromText: function(text) {for (var i = 0; i < items.length; ++i) {if (items[i].toLowerCase().indexOf(text.toLowerCase()) === 0)return i}return spinBox.value}}
}

日期类控件

日期类控件包括 DayOfWeekRow、WeekNumberColumn和MonthGrid，它们都继承自Control。

import QtQuick
import QtQuick.Controls
import QtQuick.LayoutsItem {width: 400; height: 300GridLayout {columns: 2DayOfWeekRow {locale: grid.localeLayout.column: 1Layout.fillWidth: true}WeekNumberColumn {month: grid.month; year: grid.yearlocale: grid.localeLayout.fillHeight: true}MonthGrid {id: gridmonth: Calendar.December; year: 2022locale: Qt.locale("zh_CN")Layout.fillWidth: trueLayout.fillHeight: trueonClicked: (date) => console.log(date)}}
}