Qt/QML学习-CircularGauge

QML学习

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Extras 1.4
import QtQuick.Controls.Styles 1.4

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    CircularGauge {
        id: circularGauge
        anchors.fill: parent
        anchors.centerIn: parent
        minimumValue: 0
        maximumValue: 100
        value: 50
        stepSize: 0.1
        tickmarksVisible: true

        // 自定义样式
        style: CircularGaugeStyle {
            id: style

            // 背景
            background: Rectangle {
                radius: outerRadius
                color: "black"
                border.width: 1
                border.color: "LightGray"
                Text {
                    anchors.top: parent.verticalCenter
                    anchors.horizontalCenter: parent.horizontalCenter
                    topPadding: parent.radius / 5
                    color: "white"
                    text: "关注:" + control.value
                    font {
                        pointSize: topPadding / 1.5 > 0? topPadding / 1.5: 1
                        bold: true
                    }
                }
            }

            // 大刻度
            tickmark: Rectangle {
                implicitWidth: outerRadius * 0.04
                implicitHeight: outerRadius * 0.08
                antialiasing: true
                color: styleData.value >= 80 ? "red" : "white"
            }

            // 小刻度
            minorTickmark: Rectangle {
                implicitWidth: outerRadius * 0.01
                implicitHeight: outerRadius * 0.03
                antialiasing: true
                color: styleData.value >= 80 ? "red" : "white"
            }

            // 刻度文本
            tickmarkLabel:  Text {
                font.pixelSize: Math.max(6, outerRadius * 0.1)
                text: styleData.value
                antialiasing: true
                color: styleData.value >= 80 ? "red" : "white"
            }

            // 指针
            needle: Rectangle {
                y: outerRadius * 0.15
                implicitWidth: outerRadius * 0.03
                implicitHeight: outerRadius * 0.9
                antialiasing: true
                color: "orangered"
            }

            // 前景
            foreground: Item {
                Rectangle {
                    width: outerRadius * 0.2
                    height: width
                    radius: width / 2
                    color: "orangered"
                    anchors.centerIn: parent
                }
            }

            // 刻度文本到外半径的距离
            labelInset: outerRadius * 0.25

            // 小刻度到外半径的距离
            minorTickmarkInset: outerRadius * 0.1

            // 大刻度到外半径的距离
            tickmarkInset: outerRadius * 0.05

            // 最小刻度角度位置
            minimumValueAngle: -180

            // 最大刻度角度位置
            maximumValueAngle: 90
        }
    }
    // 演示
    Timer {
        interval: 20
        repeat: true
        running: true
        onTriggered: {
            if (circularGauge.value ++ >= circularGauge.maximumValue) {
                circularGauge.value = circularGauge.minimumValue
            }
        }
    }
}

演示

视频讲解

相关推荐
秃头佛爷2 小时前
Python学习大纲总结及注意事项
开发语言·python·学习
dayouziei4 小时前
java的类加载机制的学习
java·学习
dsywws7 小时前
Linux学习笔记之vim入门
linux·笔记·学习
晨曦_子画8 小时前
3种最难学习和最容易学习的 3 种编程语言
学习
城南vision8 小时前
Docker学习—Docker核心概念总结
java·学习·docker
徒步僧9 小时前
ThingsBoard规则链节点:RPC Call Reply节点详解
qt·microsoft·rpc
ctrey_9 小时前
2024-11-1 学习人工智能的Day20 openCV(2)
人工智能·opencv·学习
十年之少9 小时前
由中文乱码引来的一系列学习——Qt
学习
u01015265810 小时前
STM32F103C8T6学习笔记2--LED流水灯与蜂鸣器
笔记·stm32·学习
可峰科技10 小时前
斗破QT编程入门系列之一:认识Qt:初步使用(四星斗师)
开发语言·qt