How to Draw a circular progress Bar using QML in QT6 - qt

Question

Conical gradient is not there in Qt6 and hence i want a circular progress bar just like the code. But i am unable to use Conical Gradient because import QtGraphicalEffects 1.15 is scrapped in Qt6
This is my code is there another alternative for Conical Gradient
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
}
}
}
}
is there an alternative for conicalGradient in Qt6?

Answer 1

There is a ConicalGradient in Qt6, but you have to use:
import Qt5Compat.GraphicalEffects