4

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

ボタンの代わりにこの四角形を使用していますが、他のボタンをクリックすると問題が発生します。どうすれば修正できますか?

4

1 に答える 1

4

このコードは私のために働きます：

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

main.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を my MyRadioButton-sのプロパティに宣言的にバインドするため、selected変更のたびに更新されます。

そうは言っても、コンポーネントプロバイダーにこのようなものがまだ含まれていないことを確認してください---車輪を再発明している可能性があります。

于 2013-03-06T12:15:16.793 に答える