个人做网站能赚到钱吗,c苏宁网站开发,HTML与wordpress兼容,兰州企业网站建设QT6学习第十一天 Qt Quick控件控件基类 Control按钮类控件指示器类控件输入类控件日期类控件 Qt Quick控件
Qt Quick本身是为了移动触摸界面而生的#xff0c;但Qt的跨平台性也决定了它需要支持多种系统。为了支持桌面平台开发#xff0c;从Qt 5.1开始#xff0c;增加了新的… 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:redControl{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 // Mediumproperty 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)}}
}
