Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to check only one switch in ListView
Forum Updated to NodeBB v4.3 + New Features

How to check only one switch in ListView

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
2 Posts 2 Posters 252 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • I Offline
    I Offline
    Iheb
    wrote on last edited by
    #1

    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
            }
        }
    } 
    
    1 Reply Last reply
    0
    • IntruderExcluderI Offline
      IntruderExcluderI Offline
      IntruderExcluder
      wrote on last edited by
      #2

      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
                              }
                          }
                      }
                  }
      
      1 Reply Last reply
      0

      • Login

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved