QML中ButtonGroup遍历按钮及字体下划线状态切换问题

嘿，你遇到的报错问题其实是个常见的小细节坑——ButtonGroup并不会把关联的按钮当作自己的子控件，它是通过ButtonGroup.group属性来绑定按钮的，所以要遍历所有按钮得用它专门的buttons数组，而不是children属性，这就是你报错ReferenceError: children is not defined的原因。

修正后的完整代码 #

Button {
    text: qsTr("Open")
    ButtonGroup.group: buttonGroup
    font.pointSize: 20; font.family: "Courier"
    onPressed: { /* 你的点击逻辑 */ }
    onReleased: { /* 你的释放逻辑 */ }
}

Button {
    text: qsTr("Close")
    ButtonGroup.group: buttonGroup
    font.pointSize: 20; font.family: "Courier"
    onPressed: { /* 你的点击逻辑 */ }
    onReleased: { /* 你的释放逻辑 */ }
}

ButtonGroup {
    id: buttonGroup

    function underlineButtons(underlined) {
        // 把children替换成buttons，遍历所有关联的按钮
        for (var i = 0; i < buttons.length; ++i) {
            buttons[i].font.underline = underlined;
        }
    }

    onClicked: {
        console.log("-------------- buttonGroup Clicked: ", button.text)
        underlineButtons(false) // 先恢复所有按钮的下划线状态
        button.font.underline = true // 给当前点击的按钮添加下划线标记
    }
}

关键逻辑说明 #

1. ButtonGroup的按钮集合：所有通过ButtonGroup.group绑定的按钮，都会被自动收集到ButtonGroup的buttons数组里，这才是正确的按钮遍历入口，children属性是用来存储ButtonGroup自己的子控件（比如嵌套的其他组件），和关联的按钮没关系。
2. 点击状态管理：每次点击按钮时，先批量取消所有按钮的下划线，再单独给当前点击的按钮设置下划线，这样就能确保始终只有最后点击的按钮保持下划线样式，完全符合你的需求。

后续如果要新增按钮，只需要给新按钮加上ButtonGroup.group: buttonGroup即可，不用修改ButtonGroup的逻辑，扩展性拉满。

内容的提问来源于stack exchange，提问作者theAlse