RadioButton in QML Desktop

Question

I have 3 radio buttons in my page, QML desktop application. Once I checked one -- I want all the other to be unchecked.

I tried using CheckableGroup with the code the I found in the help:

CheckableGroup { id: group }
Row {
 id: row
 spacing: platformStyle.paddingMedium
 RadioButton {
     id: button1
     text: "1"
     platformExclusiveGroup: group
 }
 RadioButton {
     id: button2
     text: "2"
     platformExclusiveGroup: group
 }
 RadioButton {
     id: button3
     text: "3"
     platformExclusiveGroup: group
     checked: true
 }
}

but I'm getting an error "platformExclusiveGroup is not a valid property name" I tried another solution

RadioButton {
  id: rbtnDecimal1
  width: 130
  onClicked: {
    if (checked) {
      rbtnHexadecimal1.checked=false;
      rbtnString1.checked=false;
    }
  }
  text: "Decimal Data";
  anchors.left: rbtnHexadecimal1.right
}

that when one button is checked all the other are unchecked, but the other buttons left checked until I move the mouse on them - they become unchecked.

Any idea how to implement it?

Answer 1

You need to specify an ExclusiveGroup for the RadioButtons.

Row {
    id: row
    ExclusiveGroup { id: group }
    RadioButton {
        id: button1
        text: "1"
        exclusiveGroup: group
    }
    RadioButton {
        id: button2
        text: "2"
        exclusiveGroup: group
    }
    RadioButton {
        id: button3
        text: "3"
        exclusiveGroup: group
        checked: true
    }
}

Answer 2

The RadioButton in QML desktop Components does not support your first approach but you could try this workaround instead:

property int currentIndex: 1

onCurrentIndexChanged: {
    button1.checked = currentIndex == 0
    button2.checked = currentIndex == 1
    button3.checked = currentIndex == 2
}

Row {
    RadioButton {
        id: button1
        text: "1"
        onClicked:{
            currentIndex = 0
        }
    }
    RadioButton {
        id: button2
        text: "2"
        onClicked:{
            currentIndex = 1
        }
    }
    RadioButton {
        id: button3
        text: "3"
        onClicked:{
            currentIndex = 2
        }
    }
}