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?

Decillion

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

Civilize

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

Downthrow

Thanks for your answer, JuliusG, but I tried it, and again - even though the buttons become unchecked, I can't see that until I move the mouse over them, and I want the unchecked buttons to seem like unchecked immediately when they become unchecked.Do you have any idea to complete this solution? Thanks ahead! – Decillion

I have fixed the code and it does work now. It could still be improved by setting the guards when you press the same button etc. but it should hopefully give you an idea. – Downthrow

Thanks again, It works well now, the checked and unchecked really change as I wanted, buttt---I can't see that, until I move the mouse over them!!! What should I do??? – Decillion

It works for me on Ubuntu 12.10. What platform and which version of Qt are you using? – Downthrow

I'm using Windows7 OS, and I think QT 4.x. Do you have any way to simulate mouse over event in order to resolve this problem? I think it's an unsolvable problem.. – Decillion

I have Qt 5.1 and this code works fine. All that is missing is some code to initialise the button state. The three buttons will all be unchecked until the current index changes once, or some extra code is needed to read the current state once at startup. – Ar