Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to check only one switch in ListView



  • 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
                            }
                        }
                    }
                }
    

Log in to reply