Solved 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? -
@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 } } } } }
-
@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?
-
@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?
-
@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 } } } } } }
-
Thanks. But I've already done everything in C++. Too bad I can't update the ListView.