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



  • 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"});


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



  • @karlheinzreichel is this not the same thing?

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

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.