Пользовательский переключатель в 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' 
    } 
} 

Я использую этот прямоугольник вместо кнопки, но у него есть proble когда нажмите на другой кнопке для 2END времени как я мог это исправить?

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

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 моего MyRadioButton-s, поэтому он будет обновляться при каждом изменении selected.

---

После сказанного, пожалуйста, проверьте, что вы компонент провайдера уже не содержат некоторые вещи, как это --- возможно, вы заново изобретать колесо.