QML: изменение стиля при наведении и при нажатии на кнопку

hover, containsMouse, mouseArea, onhover

if (parent.pressed)
{
   color: "red"
}
else if (mouseArea.containsMouse)
{
   color: "blue"
}
else
{
   color: "green"
}

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

Window {
    id: win
    visible: true
    width: 640
    height: 480
    title: qsTr("Hover and Press")

    ColumnLayout {
        anchors.fill: parent
        spacing: 25
        Item {
            Layout.fillHeight: true
        }
        Button {
            Layout.alignment: Qt.AlignCenter
            implicitWidth: 200
            implicitHeight: 100


            background: Rectangle {
                border.width:5
                border.color: parent.pressed ? "pink" : "violet"
                color: parent.pressed ? "violet" : "pink"
                radius: width/4

            Text {
                anchors.centerIn: parent
                font.pointSize: 16
                font.bold: true
                text: "PRESS"
            }
          }
        }
        Button {
            Layout.alignment: Qt.AlignCenter
            implicitWidth: 200
            implicitHeight: 100
            MouseArea {
                id: mouseArea
                anchors.fill: parent
                hoverEnabled: true
            }


            background: Rectangle {
                border.width:5
                border.color: mouseArea.containsMouse ? "magenta" : "blue"
                color: mouseArea.containsMouse ? "blue" : "magenta"
                radius: width/4

            Text {
                anchors.centerIn: parent
                font.pointSize: 16
                font.bold: true
                text: "HOVER"
            }
          }
        }
        Item {
            Layout.fillHeight: true
        }
    }
}

Рекомендуємо хостинг TIMEWEB

Стабільний хостинг, на якому розміщується соціальна мережа EVILEG. Для проектів на Django радимо VDS хостинг.

if (parent.pressed)
{
   return "red"
}
else if (mouseArea.containsMouse)
{
   return "blue"
}
else
{
   return "green"
}

Да, с синтаксисом были проблемы, спасибо за подсказку. Правильно было бы так:

color: if (parent.pressed)
{
   return "red"
}
else if (mouseArea.containsMouse)
{
   return "blue"
}
else
{
   return "green"
}

И всё же так работает только наведение, на нажатие не рагирует. Попробовал так:

color: if (parent.pressed)
{
   return "red"
}
else if (mouseArea.containsMouse & !parent.pressed)
{
   return "blue"
}
else
{
   return "green"
}

То же самое.

Добавил в MouseArea

onPressed: { bacgroundRectangle.color = 'red' }

Результат как с onClicked - один раз меняется цвет и больше не реагирует на события.
Поэтому добавил onReleased - поведение оказалось не таким как предполагалось интуитивно, но меня устроит. После отжимания, кнопка приобретает указанный цвет и больше не реагирует на наведение. В моём случае это и не понадобится, а могло бы.

Не сказать что такой вариант устраивает, остаются вопросы, нехорошо. Но пока можно и так.
С третьей кнопкой все целиком так. Если есть идеи по очеловечиванию этой кракозябры малой кровью то прошу пожалуйста.

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

Window {
    id: win
    visible: true
    width: 640
    height: 480
    title: qsTr("Hover and Press")

    ColumnLayout {
        anchors.fill: parent
        spacing: 25
        Item {
            Layout.fillHeight: true
        }
        Button {
            Layout.alignment: Qt.AlignCenter
            implicitWidth: 200
            implicitHeight: 100


            background: Rectangle {
                border.width:5
                border.color: parent.pressed ? "pink" : "violet"
                color: parent.pressed ? "violet" : "pink"
                radius: width/4

            Text {
                anchors.centerIn: parent
                font.pointSize: 16
                font.bold: true
                text: "PRESS"
            }
          }
        }
        Button {
            Layout.alignment: Qt.AlignCenter
            implicitWidth: 200
            implicitHeight: 100
            MouseArea {
                id: mouseArea
                anchors.fill: parent
                hoverEnabled: true
            }


            background: Rectangle {
                border.width:5
                border.color: mouseArea.containsMouse ? "magenta" : "blue"
                color: mouseArea.containsMouse ? "blue" : "magenta"
                radius: width/4

            Text {
                anchors.centerIn: parent
                font.pointSize: 16
                font.bold: true
                text: "HOVER"
            }
          }
        }

        Button {
            Layout.alignment: Qt.AlignCenter
            implicitWidth: 200
            implicitHeight: 100
            hoverEnabled: true

            MouseArea {
                id: mouseArea2
                anchors.fill: parent
                hoverEnabled: true
                onPressed: { bacgroundRectangle.color = 'red' }
                onReleased: { bacgroundRectangle.color = 'gray' }
            }

            background: Rectangle {
                id: bacgroundRectangle
                border.width:5
                color: mouseArea2.containsMouse ? "blue" : "green"
                radius: width/4

            Text {
                anchors.centerIn: parent
                font.pointSize: 16
                font.bold: true
                text: "HOVER & PUSH"
            }
          }
        }
        Item {
            Layout.fillHeight: true
        }
    }
}

Читал доки. Узнал про сигналы entered, exited в MouseArea QML Type.
С ним можно сделать то о чём спрашивал, хотя может это и не лучший способ.
А вот не спросил бы - не стал бы читать доков наверное, не знаю почему так.

onPressed: { bacgroundRectangle.color = 'red' }

Ломает биндинг, поэтому лучше не использовать.

Ломает биндинг

Как раз как бы его теперь сломать, чтобы после отжимания кнопка становилась серой и больше ни на что не реагировала.

Так работает превосходно, если бы только биндинг не нужно было сломать, как оказалось:

Button {
            Layout.alignment: Qt.AlignCenter
            implicitWidth: 200
            implicitHeight: 100
            hoverEnabled: true

            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onPressed: { bacgroundRectangle.color = 'blue'
                console.log("pressed?", pressed)
                }
                onReleased: { bacgroundRectangle.color = 'yellow'
                    console.log("released?", released)
                }
                onExited: { bacgroundRectangle.color = 'green'
                    console.log("exited?", exited)
                }
                onEntered: { bacgroundRectangle.color = 'yellow'
                    console.log("entered?", entered)
                }
            }

            background: Rectangle {
                id: bacgroundRectangle
                border.width:5
                color: "green"
                radius: width/4

            Text {
                anchors.centerIn: parent
                font.pointSize: 16
                font.bold: true
                text: "HOVER & PUSH"
            }
          }
        }

Button{
    id: myButton

    MouseArea {
        hoverEnabled: true
        onReleased: myButton.enabled = false        
    }
}

Так кнопка перестанет быть активной и не будет ни на что реагировать)
Ну там всякие anchors.fill: parent и тп - добавить по вкусу)

enabled = false
перестанет быть активной и не будет ни на что реагировать)

Хм.. по-моему пробовал такое. Проверю ещё раз после работы.

enabled = false
перестанет быть активной и не будет ни на что реагировать)

Хм.. по-моему пробовал такое. Проверю ещё раз после работы.

Ура, спасибо большое! Работает.

Всем спасибо за подсказки.