Iterate over buttons in ButtonGroup QML - qt

Question

I have a bunch on Button in my QML application.
Since there are many buttons on the same page it might be difficult for the user to see which button was pressed last!
So I would like to change the last Button font to indicate it was pressed, but later when another button gets pressed I would like to restore its font again.
I can not find a good way to do this.
I tried connecting all buttons to a ButtonGroup, but I need to iterate through all the buttons in order to set underline to false but however I try to do this I get different type of error.
Please see the example below:
Button {
text: qsTr("Open")
ButtonGroup.group: buttonGroup
font.pointSize: 20; font.family: "Courier"
onPressed: { /* some action here*/ }
onReleased: { /* some action here*/ }
}
Button {
text: qsTr("Close")
ButtonGroup.group: buttonGroup
font.pointSize: 20; font.family: "Courier"
onPressed: { /* some action here*/ }
onReleased: { /* some action here*/ }
}
ButtonGroup {
id: buttonGroup
function underlineButtons(underlined) {
for (var i = 0; i < buttons.length; ++i) {
children[i].font.underline = underlined;
}
}
onClicked: {
console.log(" -------------- buttonGroup Clicked: ", button.text)
underlineButtons(false) // restore old buttons
button.font.underline = true // mark the last button clicked
}
}
I am getting the following error what ever I do to try to access the children element.
qrc:/main.qml:65 ((null)): qrc:/main.qml:65: ReferenceError: children is not defined

Answer 1

Short answer
You can either
iterate on the children of the parent of your buttons
or iterate on the buttons of your ButtonGroup.
Long answer
Every QML Item has a children property, containing all Item-inherited children.
It means that you can iterate over the children of an item, like any other list of elements.
Item {
id: container
function setUnderlineOnChildren() {
for (var i = 0; i < children.length; ++i) {
children[i].font.underline = true;
}
}
Button {}
Button {}
Button {
onClicked: {
container.setUnderlineOnChildren();
}
}
}
ButtonGroup is used to create mutually exclusive checkable buttons (like radio buttons) as explained in the documentation. But contrary to most QML elements, because it does not represent a graphical element, it inherits QtObject instead of Item. So it won't have the children property of Items. But you should be able to do the same, relying on the buttons property by adding to the above
ButtonGroup {
id: myGroup
buttons: container.children
function underlineButtons(underlined) {
for (var i = 0; i < buttons.length; ++i) {
buttons[i].font.underline = underlined;
}
}
}
And then calling myGroup.underlineButtons(true).

Answer 2

You can also try using the activeFocus property and then in the font you can query whether or not the button is in active focus.
Button {
text: qsTr("Open")
font.pointSize: activeFocus ? 30 : 20
font.family: "Courier"
onPressed: {
activeFocus = true
/* some action here*/ }
onReleased: {/* some action here*/ }
}
Button {
text: qsTr("Close")
font.pointSize: activeFocus ? 30 : 20
font.family: "Courier"
onPressed: {
activeFocus = true
/* some action here*/ }
onReleased: {/* some action here*/ }
}