Unable to style my progressbar
-
Hello everyone, I am struggling with my QML code. I want to style my progress bar (it display free space on disk) so that the lower "value" is, the more red the color will be. I am using example code from documentation. But QT creator display error "Invalid property name "style".
I am using QT 5.15.15 and writing QML code inside .ui.qml so I can display it in main.qml with StackView.
import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Controls.Styles 1.4 import QtQuick.Layouts 1.15 ... Row { spacing: 10 TextEdit { text: progressBar.value.toFixed(2) selectByMouse: true font.bold: true } ProgressBar { id: progressBar objectName: "stats_dis_space_low" value: 0 from: 0 to: 100 style: ProgressBarStyle { background: Rectangle { radius: 2 color: "lightgray" border.color: "gray" border.width: 1 implicitWidth: 200 implicitHeight: 24 } progress: Rectangle { color: "lightsteelblue" border.color: "steelblue" } } } } ...
I guess the problem might be that "style" is no longer supported, but I have no idea how to circumvent it without overriding the whole ProgressBar.
Any tips are welcome, thank you!
-
@TMarek I think you are mixing
Qt Quick Controls
with code suitable forQt Quick Controls 1
. The latter is deprecated in Qt 5 .15 and has been removed completely from Qt 6.There is a customisation guide here that is the correct one to follow: https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-progressbar