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

How do I select only one RadioButton in listView?



  • Hi!
    I added RadioButton to the delegate, and now I can choose a lot of RadioButton.
    How do I select only one RadioButton in listView?

    1.png


  • Qt Champions 2019

    @Mikeeeeee "Radio buttons are auto-exclusive by default. Only one button can be checked at any time amongst radio buttons that belong to the same parent item" - https://doc.qt.io/qt-5/qml-qtquick-controls2-radiobutton.html
    How did you add radiobuttons?



  • Here's the code:

        Rectangle {
            id: rectangleLeft
            anchors.top: parent.top
            anchors.bottom: rectangleBottom.top
            anchors.left: parent.left
            anchors.margins: 15
            width: 352
            color: "white"
            border.color: "#c7bdbd"
            border.width: 1
            radius: 5
    
            Label{
                id: labelInfoMain
                font.pixelSize: 15
                anchors.top: parent.top
                text: "Общая информация"
                anchors.left: parent.left
                anchors.leftMargin: 15
                anchors.topMargin: 10
            }
    
            RadioButton{
                id: radioButtonLeftTop
                anchors.verticalCenter: labelInfoMain.verticalCenter
                anchors.right: parent.right
                anchors.rightMargin: 10
            }
    
            Rectangle{
                id: rectalgleLabelInfoMain
                width: parent.width
                height: 1
                anchors.top: labelInfoMain.bottom
                anchors.margins: 10
                color: "#c7bdbd"
            }
    
            Flickable {
                id: flickableLeft
                width: parent.width
                height: 300
                anchors.top: rectalgleLabelInfoMain.bottom
    
                ListView{
                    id: lisrViewLeft
                    width: parent.width
                    height: 300
                    model: ListModel{
                        id: listModelLeftQuestion
                    }
                    delegate: Rectangle{
                        width: parent.width
                        height: 50
                        border.color: "#c7bdbd"
                        border.width: 1
                        Button{
                            id: buttonLeftDelegate
                            anchors.verticalCenter: parent.verticalCenter
                            height: parent.height * 0.6
                            width: height
                            background: Rectangle{
                                anchors.fill: parent
                                color: "#00000000"
                            }
                            Image {
                                anchors.fill: parent
                                source: "Images/cancel.png"
                            }
                        }
    
                        Label{
                            id: labelLeftDelegate
                            anchors.verticalCenter: parent.verticalCenter
                            anchors.left: buttonLeftDelegate.right
                            anchors.leftMargin: 15
                            font.pixelSize: 15
                            text: text1
                        }
                        RadioButton{
                            id: radioButtonLeftDelegate
                            anchors.verticalCenter: labelLeftDelegate.verticalCenter
                            anchors.right: parent.right
                            anchors.rightMargin: 10
                        }
                    }
                }
            }
    }
    

  • Qt Champions 2019

    @Mikeeeeee In this code you have two RadioButton with different parents...



  • And how do I make it possible to choose only one RadioButton from all of them? Or was this not provided for in QML?


  • Qt Champions 2019

    @Mikeeeeee As explained in the documentation I posted: all these RadioButton need to have same parent...



  • Is There any RadioButton analog that is suitable for this case?


  • Qt Champions 2019

    @Mikeeeeee For which case? If you want to have a set of RadioButtons with only one button checked at a time then make sure all these buttons have same parent.



  • I linked the checked property to the model. Now how do I update the ListView according to the model?

                        RadioButton{
                            id: radioButtonLeftDelegate
                            anchors.verticalCenter: labelLeftDelegate.verticalCenter
                            anchors.right: parent.right
                            anchors.rightMargin: 10
                            checked: chacked1
                            onCheckedChanged: {
                                //console.log(listModelLeftQuestion.clear())
                                //console.log(lisrViewLeft.currentIndex)
                                //console.log(chacked1)
                                radioButtonLeftTop.checked = false
                                //lisrViewLeft.
                                lisrViewLeft.update()
                                checked = true
                            }
                        }
    
            for(var i = 0; i < 5; i++){
                listModelLeftQuestion.append({ text1: "left model " + i ,
                                                 id1: i,
                                                 chacked1: false
                                             })
            }
    


  • @Mikeeeeee Take a look at ButtonGroup and RadioDelegate



  • Using Button Group with RadioButton also works.
    Sorry this isn't how your view is laid out, but maybe you can take something from it;

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12
    
    Window {
       visible: true
       width: 240; height: width
       title: qsTr("Analog radio buttons")
    
       ButtonGroup { id: buttonGroup }
       Column { id: column; spacing: 10; height: 50
           ListView {
               width: 180; height: 40
               model: 1
               delegate: RadioButton {
                   id: dab
                   text: qsTr("DAB")
                   checked: false
                   ButtonGroup.group: buttonGroup
                   background: Rectangle {
                       color: "#00000000"
                       anchors.fill: parent
                       implicitWidth: 140
                       height: parent.height
                       border.width: 2
                       border.color: "black"
                       radius: 80
                   }
                   contentItem: Text {
                       text: dab.text
                       font.bold: true
                       leftPadding: parent.indicator.width + parent.spacing
                       verticalAlignment: Text.AlignVCenter
                   }
               }
           }
           ListView {
               width: 180; height: 40
               model: 1
               delegate: RadioButton {
                   id: fm
                   text: qsTr("FM")
                   ButtonGroup.group: buttonGroup
                   background: Rectangle {
                       color: "#00000000"
                       anchors.fill: parent
                       implicitWidth: 160
                       height: parent.height
                       border.width: 2
                       border.color: "black"
                       radius: 80
                   }
                   contentItem: Text {
                       text: fm.text
                       font.bold: true
                       leftPadding: parent.indicator.width + parent.spacing
                       verticalAlignment: Text.AlignVCenter
                   }
               }
           }
           ListView {
               width: 180
               height: 40
               model: 1
               delegate: RadioButton {
                   id: am
                   text: qsTr("AM")
                   ButtonGroup.group: buttonGroup
                   contentItem: Text {
                       text: am.text
                       color: "white"
                       font.bold: true
                       leftPadding: parent.indicator.width + parent.spacing
                       verticalAlignment: Text.AlignVCenter
                   }
                   background: Rectangle {
                       color: "blue"
                       anchors.fill: parent
                       implicitWidth: 180
                       height: parent.height
                       radius: 90
                   }
                   indicator: Rectangle {
                       x: 7; radius: 15
                       implicitWidth: 28
                       implicitHeight: 28
                       anchors.verticalCenter: parent.verticalCenter
                       Rectangle {
                           width: 20; height: width
                           anchors.centerIn: parent
                           color: "blue"
                           visible: am.checked
                           radius: 10
                       }
                   }
               }
           }
       }
    }
    
    

    ButtonGroupRadioButton.JPG



  • Thanks. But I've already done everything in C++. Too bad I can't update the ListView.


Log in to reply