CODEWITHSUNDEEP
qmlqt5
Tim
Tim

Reputation: 4813

QML property is null

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

Upvotes: 1

Views: 3824

Answers (1)

fonZ
fonZ

Reputation: 2479

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

Upvotes: 1

Related Questions