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

演示

视频讲解

相关推荐
ajassi200032 分钟前
开源 C++ QT QML 开发(七)自定义控件--仪表盘
c++·qt·开源
musenh43 分钟前
mysql学习--日志查询
学习·mysql
报错小能手1 小时前
linux学习笔记(16)进程间通信——管道
linux·笔记·学习
Stream_Silver2 小时前
LangChain入门实践3:PromptTemplate提示词模板详解
java·python·学习·langchain·language model
wzg20163 小时前
pyqt5 简易入门教程
开发语言·数据库·qt
csgo打的菜又爱玩3 小时前
Vue 学习与实践大纲(后端视角)
前端·学习
charlie1145141914 小时前
理解C++20的革命特性——协程引用之——利用协程做一个迷你的Echo Server
网络·学习·socket·c++20·协程·epoll·raii
Yupureki4 小时前
从零开始的C++学习生活 4:类和对象(下)
c语言·数据结构·c++·学习
MAR-Sky4 小时前
单片机学习中的一些简单总结
单片机·嵌入式硬件·学习
Dream_言十4 小时前
光全息|OAM-旋转双维度复用全息
神经网络·学习·dnn·论文笔记