How do I select only one RadioButton in listView?

Mikeeeeee

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?

jsulm

@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?

Mikeeeeee

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

jsulm

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

Mikeeeeee

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

jsulm

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

Mikeeeeee

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

jsulm

@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.

Mikeeeeee

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

difix

@Mikeeeeee Take a look at ButtonGroup and RadioDelegate

Markkyboy

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

Mikeeeeee

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