Qt编程进阶（68）：Qt Quick扩展库组件Gauge实现温度计

大家好，欢迎来到IT知识分享网。

在Qt发布5.5版时，官方推出了Qt Quick扩展库，在Qt Quick Controls中增加了几个高级组件，本节举例介绍它们。

用Gauge实现温度计，单击“升温” “降温”按钮实现温度读数的升降，温度计界面如下图所示。实现步骤如下。

(1)新建项目

用Qt开发环境的Qt Creator创建Qt Quick Controls应用程序，项目名称为“Gauge”。

(2)编写主程序

打开“main.qml”文件，编写代码如下：

import QtQuick 2.12 import QtQuick.Controls 2.12 import QtQuick.Dialogs 1.2 import QtQuick.Layouts 1.12 import QtQuick.Extras 1.4 //导入扩展库 ApplicationWindow { //主应用窗口 visible: true width: 320 height: 270 title: qsTr("温度计") Item { width: 320 height: 270 anchors.fill: parent ColumnLayout { //纵向布局 anchors.centerIn: parent Gauge { //(a) id: thermometer minimumValue: 0 value: 30 //初始温度为30 maximumValue: 100 Layout.alignment: Qt.AlignHCenter } Label { // (b) height: 15 } Label { height: 15 } RowLayout { //横向布局 Button { // “升温”按钮 id: button1 text: qsTr("升温") onClicked: thermometer.value+=5 //温度增加 } Button { // “降温”按钮 id: button2 text: qsTr("降温") onClicked: thermometer.value-=5 //温度降低 } } } } }

其中，

• (a) Gauge{…}: Gauge控件常用于指示一定范围的值，通过minimumValue和maximumValue 属性来设置其所能指示的最小和最大值，在应用中一般作为测量仪器来使用，也可以把它作为进度条控件的增强版，用于指示数值化的进度值。
• (b) Label{…}:这里用两个Label元素是为了将温度计与其下方的两个按钮隔开一定的距离，使布局更美观些。

——————————————————

对于本文实例完整代码有需要的朋友，可关注并在评论区留言！