qml中的自定义单选按钮

Question

我想要一个带有 3 个按钮的窗口，但这个按钮应该像单选按钮一样工作！这是我的代码：

Rectangle {
    id: sideButton
    color:  sideButtonMouseArea.containsMouse ? '#DDDDDD' : '#F4F4F4'
    property string text: 'Button'
    MouseArea {
        id: sideButtonMouseArea
        anchors.fill: parent
        hoverEnabled: true
        onClicked: {
            parent.color = '#4872E8'
            sideButtonLabel.color = '#E2EBFC'
        }
    }

    Text {
        id: sideButtonLabel
        text: sideButton.text
        font.pixelSize: 20
        font.family: 'Tahoma'
        anchors.centerIn: sideButton
        color: '#787878'
    }
}

我使用这个矩形代替按钮，但是当第二次单击其他按钮时出现问题，我该如何修复它？

Answer 1

这段代码对我有用：

MyRadioGroup.qml

import QtQuick 1.0

QtObject {
    property Item selected : null
}

MyRadioButton.qml

import QtQuick 1.0

Rectangle {
    id: sideButton
    property string text: 'Button'
    property MyRadioGroup radioGroup

    color:  radioGroup.selected === sideButton ? '#E2EBFC' :
            (sideButtonMouseArea.containsMouse ? '#DDDDDD' : '#F4F4F4')
    MouseArea {
        id: sideButtonMouseArea
        anchors.fill: parent
        hoverEnabled: true
        onClicked: sideButton.radioGroup.selected = sideButton
    }

    Text {
        id: sideButtonLabel
        text: sideButton.text
        font.pixelSize: 20
        font.family: 'Tahoma'
        anchors.centerIn: sideButton
        color: radioGroup.selected === sideButton ? '#E2EBFC' : '#787878'
    }
}

主.qml

import QtQuick 1.0

Rectangle {
    height: 600
    width: 600

    MyRadioGroup {
        id: radioGroup1
    }

    Column {
        anchors.fill: parent

        MyRadioButton {
            anchors { left: parent.left; right: parent.right }
            text: "Button 1"
            radioGroup: radioGroup1
            height: 100
        }

        MyRadioButton {
            anchors { left: parent.left; right: parent.right }
            text: "Button 2"
            radioGroup: radioGroup1
            height: 100
        }

        MyRadioButton {
            anchors { left: parent.left; right: parent.right }
            text: "Button 3"
            radioGroup: radioGroup1
            height: 100
        }

        MyRadioButton {
            anchors { left: parent.left; right: parent.right }
            text: "Button 4"
            radioGroup: radioGroup1
            height: 100
        }
    }   
}

它的作用：我创建了容器MyRadioGroup来保存当前选定的项目。然后，我以声明方式将其selected属性与color我的MyRadioButton-s 属性绑定，因此它将在每次selected更改时更新。

话虽如此，请检查您的组件提供程序是否已经包含类似的东西——也许您正在重新发明轮子。