QML中圆形进度仪表盘控件的使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Shado_walker/article/details/73251691

        在之前的文章中，有一篇介绍了在QML中制作自定义圆形进度条的文章，在那篇文章中，主要是写了如何在QML的Canvas上使用2D进行绘图。同样是圆形进度条，在这篇文章中，主要介绍QML自己原生的一个圆形仪表盘的使用，其中的主体结构都是QML自己实现的，我们自己只需要根据需要，设置我们想要的样式和属性值，即可达到理想中仪表盘的效果，省去了我们自己绘制界面的过程，是一个很好的控件，希望能够帮助到需要自己开发仪表盘（模拟赛车项目）的同仁们。
一、核心代码如下：

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4

CircularGauge {
    id: gauge
    anchors.fill: parent
    //****************************************
    maximumValue: 50
    minimumValue: 10
    value: accelerating ? maximumValue : 0
    property bool accelerating: false
    Keys.onSpacePressed: accelerating = true
    Keys.onReleased: {
        if (event.key === Qt.Key_Space) {
            console.log("===============", value);
            accelerating = false;
            event.accepted = true;
        }
    }
    Component.onCompleted: forceActiveFocus()
    Behavior on value {
        NumberAnimation {
            duration: 1000
        }
    }
    //****************************************
    style: CircularGaugeStyle {
        tickmarkLabel: Label{text:"※"; font.pixelSize: 20}
        labelStepSize: 10
        tickmarkStepSize : 5
        tickmark: Text {
            text: styleData.value
            color: "red"
            font.pixelSize: 28
            Text {
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.bottom
                text: styleData.index
                color: "blue"
                font.pixelSize: 25
            }
        }
        minorTickmark: Text {
            text: styleData.value
            font.pixelSize: 22
            Text {
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.bottom
                text: styleData.index
                font.pixelSize: 16
                color: "blue"
            }
        }
    }
    Text {
        id: indexText
        text: parseInt(gauge.value)
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: valueText.top
        color: "red"
        font.pixelSize: 24
    }
    Text {
        id: valueText
        text: "Major and minor values"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        color: "blue"
        font.pixelSize: 18
    }
}

代码中主要引入了import QtQuick.Extras 1.4，并使用了其CircularGauge控件。

二、深度解析
CircularGauge本身的属性不多，大家有兴趣可以查看帮助了解详细描述，包括最大值、最小值、步长与当前指向值等属性。这里主要介绍自定义该仪表盘时，对其style的设置，CircularGaugeStyle即可以对CircularGauge的样式进行自定义实现，其中的属性值非常之多，基本能够完成对仪表盘的显示进行控制，这里介绍一些最常用的属性：
1. maximumValue: 自定义刻度线的最大值
2. minimumValue: 自定义刻度线的最小值
3. labelStepSize：标准刻度线在显示时，中间数据的间隔
4. tickmarkStepSize：自定义刻度线在显示时，中间数据的间隔
5. minorTickmark：标准刻度线的显示样式组件
6. tickmark：自定义刻度线的显示样式组件
其中的“自定义刻度线”为我们自定义的最大值与最小值之间的值，“标准刻度线”为控件本身从0开始的值。
通过以上的属性设置，基本可以实现一个简单的仪表盘了，其他属性，大家可以参考Qt的帮助进行查阅，以达到自己的需求，解决开发中遇到的问题。

三、效果图

按住空格键或松开空格键，即可改变仪表指针的指向，大家可以参照运行效果图，对以上代码进行分析学习。

以上，即为QML中圆形进度仪表盘控件的使用。