QML中圓形進度儀表盤控件的使用

        在之前的文章中,有一篇介紹了在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中圓形進度儀表盤控件的使用。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章