在 QML 中，ButtonGroup 是一个用于管理一组按钮（如 RadioButton、CheckBox 或 ToolButton）的非视觉对象

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

解释

1. 导入模块：

   import QtQuick 2.15
   import QtQuick.Controls 2.15
   

   导入 QML 的基本模块和控件模块。

2. ApplicationWindow：

   ApplicationWindow {
       visible: true
       width: 400
       height: 400
   

   创建一个顶级窗口，设置其宽度和高度，并使其可见。

3. ButtonGroup：

   ButtonGroup {
       id: group
       onCheckedButtonChanged: {
           console.log("Checked button changed to:", group.checkedButton.text)
       }
   }
   

   创建一个按钮组，并定义一个信号处理程序，当选中的按钮发生变化时输出新的选中按钮的文本。

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

解释

1. exclusive 属性：

   exclusive: false
   

   设置 exclusive 属性为 false，允许多选。

2. CheckBox：
   使用 CheckBox 代替 RadioButton，并通过 ButtonGroup.group 属性将它们分配到同一个按钮组中。

总结

ButtonGroup 是一个强大的工具，可以方便地管理一组按钮，使其具有互斥或多选逻辑。通过 ButtonGroup 的属性和信号，可以轻松实现复杂的按钮交互逻辑。