Switch object changes state when scrolling listview



  • Hi everybody,
    In a ListView I have multiple Switch components, if it is activated and that I scroll the listView, switches desappears beyond the screeen and when I scroll back to them it 's unactivated. Anyone had ever seen something like that ??
    Here is my switch code, nothing special excepted that I use a listView with multiple delegates and Loader, Switch is one of them..

    Component {
                                id: switchDelegate
                                Item {
                                    width: multiDelegate.width
                                    height: multiDelegate.height
    
                                    Text {
                                        font{family: "myFont"; pixelSize: multiDelegate.height/2.5}
                                        text: name
                                        anchors.verticalCenter: parent.verticalCenter
                                        anchors.left: parent.left
                                        color: "white"
                                    }
    
                                    Switch {
                                        id: centerSwitch
                                        height: multiDelegate.height*0.5 ; width: height*2.7
                                        property bool status : false
                                        anchors.verticalCenter: parent.verticalCenter
                                        anchors.horizontalCenter: parent.horizontalCenter
                                        anchors.horizontalCenterOffset: 150
                                        //focus: false
                                        style: SwitchStyle {
    
                                            // Groove part is the background of the switch
    
                                            groove: Rectangle {
                                                id:grooveR
                                                implicitHeight: centerSwitch.height
                                                implicitWidth: centerSwitch.width
                                                border.color: "white"
                                                color: (centerSwitch.status) ?  epurOrange : "black"  
                                                radius: implicitHeight/2
                                            }
    
                                            // Handle part is handleable part of the switch
                                            handle: Rectangle {
                                                implicitHeight: centerSwitch.height
                                                implicitWidth: centerSwitch.width/2.25
                                                color: Qt.lighter(darkgrey)
                                                border.color: "white"
                                                radius: implicitHeight/2
                                            }
                                        }
    

    Thanks for your help !



  • The reason is that delegates get deleted when they move out of view, and are recreated when they move back into view. So you shouldn't save any states in the delegates themselves, since it can be discarded. So instead you should find a way to save the "checked" property of the switch delegate in the model itself. Here is a simple example of how this can be done

    import QtQuick 2.7
    import QtQuick.Controls 2.0
    
    ApplicationWindow {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        ListModel {
            id: listModel
            ListElement {
                name: 1
                isChecked: false
            }
            ListElement {
                name: 2
                isChecked: false
            }
            ListElement {
                name: 3
                isChecked: false
            }
            ListElement {
                name: 4
                isChecked: false
            }
            ListElement {
                name: 5
                isChecked: false
            }
            ListElement {
                name: 6
                isChecked: false
            }
            ListElement {
                name: 7
                isChecked: false
            }
            ListElement {
                name: 8
                isChecked: false
            }
            ListElement {
                name: 9
                isChecked: false
            }
            ListElement {
                name: 10
                isChecked: false
            }
            ListElement {
                name: 11
                isChecked: false
            }
            ListElement {
                name: 12
                isChecked: false
            }
            ListElement {
                name: 13
                isChecked: false
            }
            ListElement {
                name: 14
                isChecked: false
            }
            ListElement {
                name: 15
                isChecked: false
            }
            ListElement {
                name: 16
                isChecked: false
            }
            ListElement {
                name: 17
                isChecked: false
            }
            ListElement {
                name: 18
                isChecked: false
            }
            ListElement {
                name: 19
                isChecked: false
            }
            ListElement {
                name: 20
                isChecked: false
            }
            ListElement {
                name: 21
                isChecked: false
            }
            ListElement {
                name: 22
                isChecked: false
            }
            ListElement {
                name: 23
                isChecked: false
            }
            ListElement {
                name: 24
                isChecked: false
            }
            ListElement {
                name: 25
                isChecked: false
            }
            ListElement {
                name: 26
                isChecked: false
            }
            ListElement {
                name: 27
                isChecked: false
            }
            ListElement {
                name: 28
                isChecked: false
            }
            ListElement {
                name: 29
                isChecked: false
            }
            ListElement {
                name: 30
                isChecked: false
            }
            ListElement {
                name: 31
                isChecked: false
            }
            ListElement {
                name: 32
                isChecked: false
            }
            ListElement {
                name: 33
                isChecked: false
            }
            ListElement {
                name: 34
                isChecked: false
            }
            ListElement {
                name: 35
                isChecked: false
            }
            ListElement {
                name: 36
                isChecked: false
            }
        }
    
        ListView {
            anchors.fill: parent
            model: listModel
            delegate: Switch {
                text: name
                checked: isChecked
                onCheckedChanged: listModel.setProperty(index, "isChecked", checked)
            }
        }
    }
    
    

    As you can see, each time one of the switches is changed in the delegate, it updates the model



  • Thanks a lot !
    It is working now, information can't be stored in the delegate itself, I well noticed that !!


Log in to reply
 

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