QML property is null - qml

Question

I'm trying to define a property with a default value in a reuseable QML component. Here's my code thus far:
property alias value: progressBar.value
property bool error: false
property ProgressBarStyle errorStyle: ProgressBarStyle {
background: Rectangle {
radius: 2
color: "lightgray"
border.color: "gray"
border.width: 1
implicitWidth: 200
implicitHeight: 24
}
progress: Rectangle {
color: "orangered"
border.color: "red"
}
}
Layout.fillWidth: true
ProgressBar {
id: progressBar
Layout.fillWidth: true
minimumValue: 0.0
maximumValue: 100.0
style: errorStyle
}
So the idea is errorStyle is constructed and set as the style of progressBar. I know that errorStyle works, because if I set it directly on progressBar it works. From what I can tell, the problem is errorStyle is null when I run my program.
UPDATE:
Maybe a better way of stating this question is: "How do I get around the 'PropertyChanges does not support creating state-specific objects.' error message that I get if I create the style directly in the PropertyChanges array?
UPDATE 2:
I"ve basically given up on this approach and decided to try and using styling instead. This has lead to another question: Cannot create certain QML types in a singleton

Answer 1

You can try declaring it with an id, and use the id. So dont declary it as a property but just like a component. Like this:
ProgressBarStyle {
id: errorStyle
background: Rectangle {
radius: 2
color: "lightgray"
border.color: "gray"
border.width: 1
implicitWidth: 200
implicitHeight: 24
}
progress: Rectangle {
color: "orangered"
border.color: "red"
}
}
ProgressBar {
id: progressBar
Layout.fillWidth: true
minimumValue: 0.0
maximumValue: 100.0
style: errorStyle
}
But the approach i would take would be the make a property color and bordercolor and change the rectangle color of the style instead of changing the style completely.
Like this:
property Color barColor
property Color barBorderColor
property Color progressColor
property Color progressBorderColor
ProgressBar {
id: progressBar
Layout.fillWidth: true
minimumValue: 0.0
maximumValue: 100.0
style: ProgressBarStyle {
background: Rectangle {
radius: 2
color: barColor
border.color: barBorderColor
border.width: 1
implicitWidth: 200
implicitHeight: 24
}
progress: Rectangle {
color: progressColor
border.color: progressBorderColor
}
}
}