Qt编程进阶(63):Qt Quick高级控件的使用

编码文章call10242025-05-07 12:00:0317A⁺A^-

Qt Quick的控件库一直都在被不断地开发、扩展和完善，除基本控件外，还在增加新的控件类型，尤其是一些高级控件做得很有特色，它们极大地丰富了Qt Quick Controls程序的界面功能。

本文实例用高级控件制作一个有趣的小程序，界面如下图所示。实现的一些功能在后面介绍。

实现步骤如下。

(1) 新建项目

创建QML项目，选择项目“Qt Quick Application - Empty”模板。项目名称为“Mermaid”。

(2) 准备图片

在项目工程目录中建一个“images”文件夹，其中放入一张图片，文件名为“Mermaid.jpg”。

右击项目视图“Resources”—“qml.qrc”下的“/”节点，选择“Add Existing Files...”项，从弹出的对话框中选择该图片打开，将其加载到项目中。

(3) 主程序

打开项目主程序文件“main.qml”，编写代码如下：

import QtQuick 2.12
import QtQuick.Controls 2.5 //导入 Qt Quick Controls 库
import QtQuick.Layouts 1.3 //导入 Qt Quick 布局库
ApplicationWindow { //主应用窗口
  width: 635
  height: 460
  visible: true
  title: qsTr("人鱼美照欣赏")
  Item { //QML通用的根元素
    width: 635
    height: 460
    anchors.fill: parent
    Image { //图像元素（显示美人鱼照片）
      id: img //图像标识
      x: 10; y: 10
      width: 614.4
      height: 384
      source: "images/Mermaid.jpg"
      fillMode: Image.Stretch //必须设为“拉伸”模式才能调整尺寸
      clip: true
    }
    BusyIndicator { // (a)
      x: 317.2; y: 202
      running: img.width < 614.4*0.4 //当画面宽度缩为原来的0.4时运行
    }
    RowLayout {
      anchors.left: img.left
      y: 399
      spacing: 5
      Label { text:"尺寸" }
      Slider { /*滑动条*/
        from: 0.1 //最小值
        to: 1.0 //最大值
        stepSize: 0.1 //步进值
        value: 1.0 //初始值
        onValueChanged: { //拖动滑块所要执行的代码
          var scale = value; //变量获取缩放比率
          img.width = 614.4*scale; //宽度缩放
          img.height = 384*scale; //高度缩放
        }
      }
      Label {
        text: "美人鱼生日："
        leftPadding: 10
      }
      TextField { //文本框用于显示用户选择的日期
        id: date
        implicitWidth: 100
        text: "1998年1月1日"
        onTextChanged: {
       	 age.value = 2023 - year.model[year.currentIndex]
        } //同步计算芳龄
      }
      Button {
        text: qsTr ("...")
        implicitWidth: 30
        onClicked: dateDialog.open() //打开日期选择对话框
      }
      Label {
        text: "芳龄"
        leftPadding: 10
      }
      SpinBox { //(b)
        id: age
        value: 25 //当前值
        from: 18 //最小值
        to: 25 //最大值
        implicitWidth: 80 //宽度
      }
      Label { text:"岁" }
      }
    }
    Dialog { /*日期选择对话框*/
      id: dateDialog
      title:"选择日期"
      width: 275
      height: 300
      standardButtons: Dialog.Ok | Dialog.Cancel
      onAccepted: {
        date.text = year.model[year.currentIndex]+"年"
        +month.model[month.currentIndex]
        +day.model[day.currentIndex]+"日"
    	} //(c)
      Frame { //(d)
      anchors.centerIn: parent
      Row {
        Tumbler { //(d)翻选月份
          id: month
          model: ["1月", "2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
        }
        Tumbler { //(d)翻选日
          id: day
          model: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
          17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]
        }
        Tumbler { //(d)翻选年
          id: year
          model: ["1998", "1999", "2000", "2001", "2002", "2003", "2004","2005" ]
        }
      }
    }
  }
}

其中，

(a) BusyIndicator{…}: 忙指示器是QtQuick中一个很特别的控件，自Qt5.2引入，它的外观是一个动态旋转的圆圈,类似于网页加载时的页面效果。当应用程序正在载入某些内容或者UI被阻塞等待某个资源变为可用时，要使用BusyIndicator提示用户耐心等待。最典型的应用就是在界面载入比较大的图片时，例如：

Busylndicator {
	running: img.status === Image.Loading
}

就本例来说，由于图片载入过程很快，无法有效地展示Busylndicator,故程序中改为将图片尺寸缩至一定程度时应用BusyIndicator。

(b) SpinBox{…}: 数值旋转框是一个右侧带有加减按钮的文本框，它允许用户通过单击按钮来选取一个数值。默认情况下，SpinBox提供0~99区间内的离散数值，步进值为1 (即每单击一次，数值就增或减1，from/to属性设定SpinBox中允许的数值范围，本例设定美人鱼的年龄在18~25岁之间，一旦超出范围，SpinBox会强制约束用户的输入。
(c) date.text = year.model[year.currentIndex]+"年"+month.model[month.currentIndex]+day.model[day.currentIndex]+"日"：这里通过模型（model)的索引（currentIndex)得到用户当前选中项对应的年月日值，再组合成一个完整的日期。
(d) Frame{…Row { Tumb {…}…}}: Tumbler控件最先是由Qt 5.5的QtQuick.Extras 1.4库引入的，当前Qt Quick Controls 2.5保留了这个控件，并在某些方面进行了升级完善。Tumbler是一种界面翻选框控件，在Qt中一般与Frame、Row元素配合使用，每个Tumbler元素在界面上都呈现出一种滚轮条的效果，供用户上下翻动以选择合适的值。