QML中圆形进度仪表盘控件的使用

最新推荐文章于 2025-07-08 11:25:00 发布

原创

最新推荐文章于 2025-07-08 11:25:00 发布 · 6.6k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#QML #圆形进度仪表盘 #canvas #2d

本文介绍了如何在QML中创建和使用圆形进度仪表盘控件，通过Canvas实现2D图形绘制，展示了一个直观的效果图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在之前的文章中，有一篇介绍了在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: 10