在 QML 中,ButtonGroup
是一个用于管理一组按钮(如 RadioButton
、CheckBox
或 ToolButton
)的非视觉对象。通过将按钮分配给同一个 ButtonGroup
,可以方便地实现互斥选择(例如,单选按钮组)或多选逻辑。
ButtonGroup 的详细解释
属性
- buttons:包含该组中所有按钮的列表。这是一个只读属性。
- checkedButton:返回当前选中的按钮(仅适用于单选按钮)。这是一个可读写属性。
- exclusive:确定该组是否为互斥组(即只有一个按钮可以被选中)。默认值为
true
。
信号
- buttonClicked(button):当组中的任意一个按钮被点击时发出。
- checkedButtonChanged(button):当组中的选中按钮发生变化时发出(仅适用于单选按钮)。
示例代码
以下是一个包含 RadioButton
的 ButtonGroup
的示例:
import QtQuick 2.15
import QtQuick.Controls 2.15
ApplicationWindow {
visible: true
width: 400
height: 400
ButtonGroup {
id: group
onCheckedButtonChanged: {
console.log("Checked button changed to:", group.checkedButton.text)
}
}
Column {
anchors.centerIn: parent
spacing: 10
RadioButton {
text: "Option 1"
checked: true
ButtonGroup.group: group
}
RadioButton {
text: "Option 2"
ButtonGroup.group: group
}
RadioButton {
text: "Option 3"
ButtonGroup.group: group
}
}
}
解释
导入模块:
import QtQuick 2.15 import QtQuick.Controls 2.15
导入 QML 的基本模块和控件模块。
ApplicationWindow:
ApplicationWindow { visible: true width: 400 height: 400
创建一个顶级窗口,设置其宽度和高度,并使其可见。
ButtonGroup:
ButtonGroup { id: group onCheckedButtonChanged: { console.log("Checked button changed to:", group.checkedButton.text) } }
创建一个按钮组,并定义一个信号处理程序,当选中的按钮发生变化时输出新的选中按钮的文本。
RadioButton:
Column { anchors.centerIn: parent spacing: 10 RadioButton { text: "Option 1" checked: true ButtonGroup.group: group } RadioButton { text: "Option 2" ButtonGroup.group: group } RadioButton { text: "Option 3" ButtonGroup.group: group } }
创建三个
RadioButton
,并将它们添加到一个Column
布局中。每个按钮通过ButtonGroup.group
属性被分配到同一个按钮组中。第一个按钮默认选中。
多选示例
如果你希望实现多选逻辑,可以使用 CheckBox
并将 exclusive
属性设置为 false
:
import QtQuick 2.15
import QtQuick.Controls 2.15
ApplicationWindow {
visible: true
width: 400
height: 400
ButtonGroup {
id: group
exclusive: false
onButtonClicked: {
console.log(button.text, "clicked. Checked:", button.checked)
}
}
Column {
anchors.centerIn: parent
spacing: 10
CheckBox {
text: "Option 1"
ButtonGroup.group: group
}
CheckBox {
text: "Option 2"
ButtonGroup.group: group
}
CheckBox {
text: "Option 3"
ButtonGroup.group: group
}
}
}
解释
exclusive 属性:
exclusive: false
设置
exclusive
属性为false
,允许多选。CheckBox:
使用CheckBox
代替RadioButton
,并通过ButtonGroup.group
属性将它们分配到同一个按钮组中。
总结
ButtonGroup
是一个强大的工具,可以方便地管理一组按钮,使其具有互斥或多选逻辑。通过 ButtonGroup
的属性和信号,可以轻松实现复杂的按钮交互逻辑。