QML. Как сделать кнопку?

Объект типа "Кнопка" должна обладать следующей функциональностью:

  1. Изменять свой вид при наведении курсора мыши.
  2. Восстанавливать исходное состояние при сведении курсора мыши.
  3. Изменять вид при нажатии на кнопку.
  4. Восстанавливать вид (2), когда кнопка отпущена.
  5. Вызывать какие-либо изменения.

Напишем на QML такой интерфейс: две кнопки и белый прямоугольник, при щелчке на одной кнопке прямоугольник становится зеленым, по другой - голубым, при щелчке на самом прямоугольнике он снова становится белым.
Кнопки на QML

Обычно кнопку делают из прямоугольника. Однако можно подозревать, что ее поведение можно реализовать и взяв за основу другой объект QML.

Чтобы кнопка менялась при наведении и сведении мыши, в MouseArea следует установить значение свойства hoverEnabled в true, а также установить значения onEntered, onExited, например, так:

hoverEnabled: true
onEntered: parent.border.color = "gray"
onExited: parent.border.color = "green"

(Для onExited указан цвет, который был задан для основного (1) состояния кнопки).

Изменение кнопки при щелчке на ней задается следующим образом в свойстве color прямоугольника:

color: button_green_mouse_area.pressed ? "green" : "lightgreen"

С помощью onClicked в MouseArea можно задать изменение свойства другого объекта:

onClicked: rect_color_change.color = "lightgreen"

Возникла сложность, не получается одновременно менять одно и тоже свойство прямоугольника. Если цвет заполнения меняется при нажатии, то при наведении получается менять только цвет рамки. Иначе изменение цвета при нажатии не срабатывает.

Весь код интерфейса:

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
 
Rectangle {
    width: 390
    height: 210
 
    Rectangle {
        id: button_green
        x: 35
        y: 37
        width: 119
        height: 51
        color: button_green_mouse_area.pressed ? "green" : "lightgreen"
        radius: 7
        border.width: 3
        border.color: "green"
        Text {
            id: button_green_label
            x: 38
            y: 18
            text: qsTr("Зеленый")
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            font.pixelSize: 16
        }
        MouseArea {
            id: button_green_mouse_area
            anchors.fill: parent
            hoverEnabled: true
            onEntered: parent.border.color = "gray"
            onExited: parent.border.color = "green"
            onClicked: rect_color_change.color = "lightgreen"
        }
    }
 
    Rectangle {
        id: button_blue
        x: 35
        y: 118
        width: 119
        height: 51
        color: button_blue_mouse_area.pressed ? "darkblue" : "lightblue"
        radius: 7
        border.width: 3
        border.color: "darkblue"
        Text {
            id: button_blue_label
            x: 38
            y: 18
            text: qsTr("Голубой")
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            font.pixelSize: 16
        }
        MouseArea {
            id: button_blue_mouse_area
            anchors.fill: parent
            hoverEnabled: true
            onEntered: parent.border.color = "gray"
            onExited: parent.border.color = "darkblue"
            onClicked: rect_color_change.color = "lightblue"
        }
    }
 
    Rectangle {
        id: rect_color_change
        x: 186
        y: 30
        width: 167
        height: 148
        color: "#ffffff"
        border.width: 3
        border.color: "#000000"
        MouseArea {
            id: rect_color_change_mouse_area
            anchors.fill: parent
            onEntered: rect_color_change.color = "white"
        }
    }
 
}