qml 汽车仪表表盘圆形进度条

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

原创

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

12 ·

CC 4.0 BY-SA版权

本文介绍如何利用 QML 技术设计一款汽车仪表盘风格的圆形进度条，涵盖了图形渲染、动画效果及自定义组件的实现细节。

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

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

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

    property real minimumValue: 0
    property real maximumValue: 116
    property real currentValue: 0
    property color secondaryColor: "blue"
    property real maxValue: 100

    onCurrentValueChanged:canvas.requestPaint()

    Canvas {
        id: canvas
        width: 640
        height: 480
        antialiasing: true

        property real centerWidth: width/2
        property real centerHeight: height/2
        property real radius: width/3

        // this is the angle that splits the circle in two arcs
        // first arc is drawn from 0 radians to angle radians
        // second arc is angle radians to 2*PI radians
        property real angle: (currentValue - minimumValue) / (maximumValue - minimumValue) * 2 * Math.PI

        //