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

演示

视频讲解

相关推荐
无名工程师7 分钟前
AI 学习过程中各阶段的学习重点、时间规划以及不同方向的选择与建议等内容
人工智能·学习
试着21 分钟前
零基础学习性能测试第五章:JVM性能分析与调优-垃圾回收器的分类与回收
jvm·学习·零基础·性能测试·垃圾回收器
livemetee26 分钟前
Flink2.0学习笔记:Stream API 常用转换算子
大数据·学习·flink
WXX_s29 分钟前
【OpenCV篇】OpenCV——03day.图像预处理(2)
人工智能·python·opencv·学习·计算机视觉
艾莉丝努力练剑1 小时前
【LeetCode&数据结构】二叉树的应用(二)——二叉树的前序遍历问题、二叉树的中序遍历问题、二叉树的后序遍历问题详解
c语言·开发语言·数据结构·学习·算法·leetcode·链表
花月mmc1 小时前
CanMV-K230 AI学习笔记系列
人工智能·笔记·学习
fengye2071612 小时前
板凳-------Mysql cookbook学习 (十二--------6)
学习·mysql·adb
喜欢吃燃面2 小时前
C++:list(1)list的使用
开发语言·c++·学习
waveee1232 小时前
学习嵌入式的第三十三天-数据结构-(2025.7.25)服务器/多客户端模型
服务器·数据结构·学习
努力自学的小夏3 小时前
RK3568 Linux驱动学习——Linux驱动开发准备工作
linux·驱动开发·笔记·学习