qml中的自定义单选按钮

我想要一个有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'
    }
}

---

我用这个矩形代替按钮，但当第二次点击其他按钮时，它有一个问题

---

如何修复它？

此代码适用于我：

MyRadioGroup.qml

import QtQuick 1.0

QtObject {
    property Item selected : null
}

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

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

MyRadioButton.qml

import QtQuick 1.0

QtObject {
    property Item selected : null
}

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

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

main.qml

import QtQuick 1.0

QtObject {
    property Item selected : null
}

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

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

属性与我的

MyRadioButton

-s的

color

属性绑定，因此它将在每次

selected

更改时更新

---

---

话虽如此，请检查您的组件提供商是否还没有包含类似的内容——也许您正在重新发明轮子。

也许您可以更具体地说明您的问题。。。也许你们应该看看这个：“我用这个矩形代替按钮”——所以，按钮是一个选项，然而，按钮不是qtquick核心的一部分。您使用什么外部库<代码>symbian/meego或Ubuntu手机上的qt组件？另外，请检查，是否有单选按钮的标准组件？