QML property is null

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

fonZ · Answer 1 · 2014-04-16T22:30:16.030

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
        }
    }
}

edited Apr 16 '14 at 22:30

answered Apr 16 '14 at 22:21

fonZ

2,428
4
21
40

Using a component and id didn't work, same problem. The reason I want to replace the whole style object is that on Mac, the default progress bar style is system defined, and from what I can tell, opaque, so I cannot change the colour, thus I want to change the whole style when there is an error condition. – Tim Apr 16 '14 at 22:53
And what about changing the colors as i suggest in my second solution? – fonZ Apr 17 '14 at 06:17
Like I said, the progress bar on OSX is by default system defined (for instance, it is animated) and from what I can tell not a simple style, so I can't just change the colours. – Tim Apr 19 '14 at 14:02
I mean the colors of the ProgressBarStyle Rectangle background and progress. And dont tell me that doenst work because i know it does, i tested it. – fonZ Apr 19 '14 at 16:57
This works, but it doesn't do what I want. The problem is by default, on OSX I get a nice, blue animated progress bar -- I'm not specifying the style. While I could specify the style and switch colors like you suggest, I then lose the animated progress bar. – Tim Apr 21 '14 at 20:54
You can animate it yourself with qml, but i understand your problem. Personally i think qml is still buggy, especially the newest features like the styles in QtQuick.Controls. You could detect the OS and set a variable that enables or disables the style or something or you can use property animations which are very easy to use and perform very well. – fonZ Apr 22 '14 at 22:50

QML property is null

1 Answers1