在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元素是为了将温度计与其下方的两个按钮隔开一定的距离，使布局更美观些。

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

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