Unsolved 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 !!