如何在 QT6 中使用 QML 繪制圓形進度條

Question

Qt6 中不存在錐形漸變，因此我想要一個圓形進度條，就像代碼一樣。 但我無法使用錐形漸變，因為導入 QtGraphicalEffects 1.15 在 Qt6 中被廢棄

這是我的代碼圓錐漸變是否有另一種選擇

Main.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.0

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

    Custom_Temp{
        anchors.centerIn: parent
        from_value: 0
        to_value: 100
        range_1: 35
        range_2: 50
        range_3: 80
        unit: "°"
        vlaue: 60
    }

}

Custom_temp.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.15

Item {
    property int from_value
    property int to_value
    property int range_1
    property int range_2
    property int range_3
    property alias vlaue: main_progress_bar.value
    property string unit

    ProgressBar{
        anchors.centerIn: parent
        id:main_progress_bar
        from: from_value
        to: to_value
        property string actual_color: value >= range_2 ? "red": value >= range_1? "#ffe208" : "green"
        background: Rectangle {
            implicitWidth: 100
            implicitHeight: 6
            color: "transparent"
            radius: 3
        }

        contentItem:
            Rectangle{
            color: "transparent"
            implicitWidth: 100
            implicitHeight: implicitWidth
            Rectangle
            {
                id: outerRing
                z: 10
                anchors.fill: parent
                radius: Math.max(width, height) / 2
                color: "transparent"
                border.color: "gray"
                border.width: 16
            }
            Rectangle
            {
                id: innerRing
                z: 10
                anchors.fill: parent
                anchors.margins: (outerRing.border.width - border.width) / 2
                radius: outerRing.radius
                color: "transparent"
                border.color: "darkgray"
                border.width: 8

                ConicalGradient
                {
                    source: innerRing
                    anchors.fill: parent
                    gradient: Gradient
                    {
                        GradientStop { position: 0.00; color: main_progress_bar.actual_color }
                        GradientStop { position: main_progress_bar.value/100; color: main_progress_bar.actual_color }
                        GradientStop { position: (main_progress_bar.value/100) + 0.01; color: "transparent" }
                        GradientStop { position: 1.00; color: "transparent" }
                    }
                }
            }
            Label
            {
                id: progressLabel
                anchors.centerIn: parent
                color: main_progress_bar.value >= range_2? "red": main_progress_bar.value >= range_1? "#ffe208" : "green"
                text: (main_progress_bar.value.toFixed(1)) + "°"
                font.pixelSize: 20
            }
        }
    }
}

Qt6中有conicalGradient的替代品嗎？

Answer 1

Qt6中有一個ConicalGradient ，但你必須使用：

import Qt5Compat.GraphicalEffects