如何更改 QML Dial 中的圆形进度条？

Posted 2023-02-16

【中文标题】如何更改 QML Dial 中的圆形进度条？

【英文标题】：How change circular progress bar in QML Dial?

【发布时间】：2019-02-14 20:53:02

【问题描述】：

我在 QML 拨号组件中更改进度条颜色时遇到问题。我尝试使用 Canvas，但最后我什么也没做。有什么建议或例子吗？

Dial 
    value: 0.5
    anchors.horizontalCenter: parent.horizontalCenter

黑色进度条

【参考方案1】：

如this another answer所示，您可以使用调色板，为此您可以检查source code，因此解决方案是：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.5

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

    Dial 
        // @disable-check M17
        palette.dark: "red"
        value: .5
        anchors.centerIn: parent
    

【参考方案2】：

另一种更改项目颜色的方法是 ColorOverlay，它支持 RGBA。

https://doc.qt.io/qt-5/qml-qtgraphicaleffects-coloroverlay.html#details

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.5
import QtGraphicalEffects 1.12

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

    Dial 
        id: dial
        value: .5
        anchors.centerIn: parent
    

    ColorOverlay 
        anchors.fill: dial
        source: dial
        color: "#80800000"