QML ButtonGroup怎么互斥Rectangle

在 QML 中，可以使用 `ButtonGroup` 组件来管理一组按钮。可以通过将 `exclusive` 属性设置为 `true` 来使按钮组成为互斥的。也就是说，一次只能选择一个按钮。

要将 `ButtonGroup` 与 `Rectangle` 组件一起使用，可以将 `ButtonGroup` 组件作为 `Rectangle` 组件的子项，并使用 `checkedButton` 属性来确定哪个按钮被选中。然后，可以使用 `state` 属性来控制 `Rectangle` 的状态，以便在不同的选择情况下呈现不同的样式。

下面是一个示例代码：

import QtQuick 2.0

Rectangle {
    width: 200
    height: 200

    ButtonGroup {
        id: group
        exclusive: true

        Button { text: "Option 1" }
        Button { text: "Option 2" }
        Button { text: "Option 3" }
    }

    states: [
        State {
            name: "option1"
            when: group.checkedButton.text === "Option 1"
            PropertyChanges { color: "red" }
        },
        State {
            name: "option2"
            when: group.checkedButton.text === "Option 2"
            PropertyChanges { color: "green" }
        },
        State {
            name: "option3"
            when: group.checkedButton.text === "Option 3"
            PropertyChanges { color: "blue" }
        }
    ]

    // 初始状态
    Component.onCompleted: state = "option1"
}

在此示例中，我们创建了一个 `ButtonGroup` 组件，并将其作为 `Rectangle` 组件的子项。我们将 `exclusive` 属性设置为 `true`，以使按钮组成为互斥的。

在 `states` 属性中，我们定义了三个状态：`option1`、`option2` 和 `option3`。这些状态基于 `group.checkedButton.text` 的值来设置。当 `Option 1` 被选中时，我们将 `Rectangle` 的颜色设置为红色，当 `Option 2` 被选中时，我们将颜色设置为绿色，当 `Option 3` 被选中时，我们将颜色设置为蓝色。

最后，我们在 `Component.onCompleted` 中将状态设置为初始状态 `option1`。