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
            }
        }
    }
}

演示

视频讲解

相关推荐
CappuccinoRose6 分钟前
MATLAB学习文档(二十四)
学习·数学建模·matlab·数据可视化
菜鸟‍10 分钟前
【前端学习】仿Deepseek官网AI聊天网站React
前端·学习·react.js
今天只学一颗糖14 分钟前
Linux学习笔记--GPIO子系统和PinCtrl子系统
linux·笔记·学习
lingggggaaaa29 分钟前
小迪安全v2023学习笔记(一百三十四讲)—— Windows权限提升篇&数据库篇&MySQL&MSSQL&Oracle&自动化项目
java·数据库·windows·笔记·学习·安全·网络安全
StarPrayers.2 小时前
损失函数(Loss Function)、反向传播(Backward Propagation)和优化器(Optimizer)学习笔记
人工智能·笔记·深度学习·学习
江公望3 小时前
Qt的QT_QPA_EGLFS_INTEGRATION环境变量浅解
linux·qt·qml
涤生z4 小时前
list.
开发语言·数据结构·c++·学习·算法·list
精英的英4 小时前
【工具开发】适用于交叉编译环境的QT qmake项目转换vscode项目插件
人工智能·vscode·qt·开源软件
Source.Liu4 小时前
【BuildFlow & 筑流】品牌命名与项目定位说明
c++·qt·rust·markdown·librecad
励志不掉头发的内向程序员4 小时前
【Linux系列】掌控 Linux 的脉搏:深入理解进程控制
linux·运维·服务器·开发语言·学习