自学内容网 自学内容网
自学内容网 > 正文

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

🕗 发布于 2024-12-11 09:25 qt  

QT6学习第十一天

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.Controls

Window{
width:300;height:200
visible:true

Rectangle{
x:100;y:100;width:50;height:40
color:"red"

Control{
width:40;height:30
//Insets属性，设置控件背景，不影响控件的视觉外观的情况下扩展其可交互区域，这对于较小的控件非常有用
topInset:-2;leftInset:-2;rightInset:-6;bottomInset:-6
background: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.Layouts
　
Window {
   width: 350; height: 200; visible: true
　//RowLayout 是一种布局方式
   RowLayout {
      anchors.fill: parent; spacing: 10
      Button { 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.Layouts

Window {
   width: 350; height: 200; visible: true

   ColumnLayout {
      ButtonGroup {
         id: childGroup
         exclusive: 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.width
         ButtonGroup.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.Layouts

Window {
   width: 350; height: 200; visible: true

   RowLayout {
      DelayButton {
         text: qsTr("延迟按钮"); delay: 5000
         onActivated: 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.Layouts

Window {
   width: 350; height: 200; visible: true
   Item {
      width: 200; height: 300

      ComboBox {
         editable: true
         model: ListModel {
            id: model
            ListElement { text: "Banana" }
            ListElement { text: "Apple" }
            ListElement { text: "Coconut" }
         }
         onAccepted: {
            if (find(editText) === -1)
               model.append({text: editText})
         }
      }
   }

}
  • Dial
    Dial继承自Control，实现类似于传统的音响上拨号旋钮样式的控件，可以用来指定范围内的值。
Item {
   width: 100; height: 120
　
   Dial {
      id: dial
      from: 1; to: 10
      stepSize: 1; wrap: true
   }
   Label {
      anchors.top: dial.bottom
      text: dial.value
   }
}
  • RangeSlider、Slider
    RangeSlider 继承自Control，用于通过沿轨迹滑动两个控制柄来选择由两个值指定的范围。
RangeSlider {
   from: 1; to: 100
   first.value: 25; second.value: 75
   first.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: 10
   onMoved: console.log(value)
}
  • TextArea、TextField
    TextArea 继承自 TextEdit，提供了一个多行文本编辑器，在TextEdit 之上添加了占位符文本功能，并进行了一些装饰。
    TextField 继承自 TextInput，提供了一个单行文本编辑器，在TextInpu 基础上添加了占位符文本功能，并添加了一些装饰，可以通过background属性来指定背景项目。
   Item {
      width: 200; height: 300

      ScrollView {
         id: view
         anchors.fill: parent
         TextArea {
             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.Controls

Window {
   visible: true
   width: frame.implicitWidth + 10
   height: frame.implicitHeight + 10

   function formatText(count, modelData) {
      var data = count === 12 ? modelData + 1 : modelData;
      return data.toString().length < 2 ? "0" + data : data;
   }

   Component {
      id: delegateComponent

      Label {
         text: formatText(Tumbler.tumbler.count, modelData)
         opacity: 1.0 - Math.abs(Tumbler.displacement)
                / (Tumbler.tumbler.visibleItemCount / 2)
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
      }
   }

   Frame {
      id: frame
      anchors.centerIn: parent; padding: 0

      Row {
         id: row

         Tumbler {
            id: hoursTumbler
            model: 12; delegate: delegateComponent
         }
         Tumbler {
            id: minutesTumbler
            model: 60; delegate: delegateComponent
         }
         Tumbler {
            id: amPmTumbler
            model: ["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.Controls

Window {
   visible: true
   width: frame.implicitWidth + 10
   height: frame.implicitHeight + 10

   SpinBox {
      id: spinBox
      from: 0; to: items.length - 1
      value: 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.Layouts
　
Item {
   width: 400; height: 300
   GridLayout {
      columns: 2
      DayOfWeekRow {
         locale: grid.locale
         Layout.column: 1
         Layout.fillWidth: true
      }
      WeekNumberColumn {
         month: grid.month; year: grid.year
         locale: grid.locale
         Layout.fillHeight: true
      }
      MonthGrid {
         id: grid
         month: Calendar.December; year: 2022
         locale: Qt.locale("zh_CN")
         Layout.fillWidth: true
         Layout.fillHeight: true
         onClicked: (date) => console.log(date)
      }
   }
}

在这里插入图片描述


原文地址：https://blog.csdn.net/qq_15409121/article/details/144314626

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024