How to check only one switch in ListView
Unsolved
QML and Qt Quick
-
I have a qml ListView that show languages and respective switches as shown in the code below. The English language is initially selected. Howerver, with this code I can select multiple languages. I want to select only one (when I select one language the others are automatically unselected). How to do it? I'm using Qt 5.8.0 and QtQuick.Controls 2.0
id: langlist clip: true model: ListModel { ListElement { selected:true; title: "English"} ListElement { selected:false;title: "French"} ListElement { selected:false;title: "German"} ListElement { selected:false;title: "Italian"} } delegate: Rectangle{ id: langelement height: 70 width: parent.width color: "transparent" Label{ anchors.left: langelement.left anchors.leftMargin: 30 anchors.top : langelement.top anchors.topMargin: 30 text: model.title font.family: "Lato" font.pixelSize: 30 font.bold: false color: "#FFFFFF" } Switch { id: control anchors.right: langelement.right anchors.rightMargin: 30 anchors.top : langelement.top anchors.topMargin: 20 checked: model.selected } } }
I tried to use onPressed signal but it doesn't work properly. When I check the switch it turns on and directly turns off, dispite the selectedIndex property get the new value of the index.
ListView{ id: langlist clip: true property int selectedIndex : 0 model: ListModel { ListElement { selected:true; title: "English"} ListElement { selected:false;title: "French"} ListElement { selected:false;title: "German"} ListElement { selected:false;title: "Italian"} } delegate: Rectangle{ id: langelement height: 70 width: parent.width color: "transparent" Label{ anchors.left: langelement.left anchors.leftMargin: 30 anchors.top : langelement.top anchors.topMargin: 30 text: model.title font.family: "Lato" font.pixelSize: 30 font.bold: false color: "#FFFFFF" } Switch { id: control anchors.right: langelement.right anchors.rightMargin: 30 anchors.top : langelement.top anchors.topMargin: 20 checked: selectedIndex == index onPressed: selectedIndex = index } } }
-
Try something like this:
Switch { id: control ... checked: model.selected checkable: !checked // Prevent to uncheck already checked switch onPressed: { if (!checked) { for (let i = 0; i < langlist.model.count; ++i) { langlist.model.setProperty(i, "selected", i === model.index); // Toggle all switches } } } }