Switch object changes state when scrolling listview

[pierreGst]

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 !

[stcorp]

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

[pierreGst]

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