How to change the state of a delegate after being added to a ListView

jShu

I have a horizontal ListView that acts as a progress bar with bubbles representing each step of the application. Bubbles are inserted at the 0 index for each step to get the animation I'm going for. The delegates (bubbles) did have internal states to determine whether it was current, inactive, success or a failed state.

But after going with the ListView route, I can't figure out how to set the state of the current delegate after it has been inserted into the ListView. I tried another alternative of making states for the ListView instead of inside the delegate, using PropertyChanges to set the target for the currentItem in ListView but Qt complains and doesn't recognize the custom properties I have set within that delegate.

Here is a snippet of my code:

progressBarLayout.qml

ListView {
    id: listView_Id
    width: contentWidth
    height: bubbleSize
    anchors.centerIn: parent
    layoutDirection: Qt.RightToLeft
    orientation: ListView.Horizontal
    spacing: 0

    delegate: Item {
        width: bubbleSize
        height: width

        ProgressBubble {
            stateText: stateNumber
        }
    }
    model: ListModel { id: progressModel_Id }

    //Alternative method
    states: [
        State {
            name: "current"
            PropertyChanges {
                target: listView_Id.currentItem
                //stateWidth:
                //stateHeight:
                //stateOpacity:
            }
        }
    ]
}

progressBubble.qml

property string stateText: ""
property int stateWidth: 0
property int stateHeight: 0
property double stateOpacity: 1.0

Rectangle {
            id: stateFill_Id
            color: StyleSingleton.progressBarStateFillColor
            anchors.centerIn: parent

            //This used to work when it was not in a ListView
            states: [
                State {
                    name: "current"
                    PropertyChanges {
                        target: stateFill_Id
                        width: state_Id.width
                        height: state_Id.height
                        opacity: 1.0
                    }
                }
            ]

            Text {
            id: stateText_Id
            color: StyleSingleton.progressBarTextColor  //progressBar_txtColor
            text: stateText
            anchors.fill: parent
            font.pixelSize: 16
            z: 1
            }
}

Here is where I tried to set the state with js.

progressBarLayout.progressModel.setProperty(0, "state", "current");     //or this method
progressBarLayout.progressModel.set(0, {state: "current"});

karlheinzreichel

You can access the single ListModel-Items through a property of your model.
To change the state of an item, change the model-item

jShu

@karlheinzreichel is this not the same thing?

progressBarLayout.progressModel.setProperty(0, "state", "current");     //or this method
progressBarLayout.progressModel.set(0, {state: "current"});