Ориентация на конкретные элементы компонентов в QML

Question

CSS упрощает использование эффектов при наведении курсора для определенных кнопок / элементов в вашем DOM. Я пытаюсь создать своего рода целевую страницу для настольного приложения, но я пытаюсь обойти необходимость скопировать определенные состояния вставки для каждого объекта, который я создаю в своем main.qml.

Вот мой main.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window
{
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    NavBar
    {
        id: mainNavigation

    }
}

NavButton.qml

Rectangle
{
    id: navButton
    height: parent.height
    width: parent.width / 3 - 10
    color: "orange"

    MouseArea
    {
        state: "unhovered"
        hoverEnabled: true
        height: parent.height
        width: parent.width
        onHoveredChanged:
        {
            console.log("hovered")
            if(this.state == "hovered")
            {
                parent.state = "unhovered"
            }
            else
            {
                parent.state = "hovered"
            }
        }
    } // end mouse area

    states:
    [
        State
        {
            name: "hovered"
            PropertyChanges
            {
                target: navButton
                width: parent.width
                color: "red"

            }
        },
        State
        {
            name: "unhovered"
            PropertyChanges
            {
                target: navButton
                width: parent.width
                color: "orange"
            }
        }
    ]
}

NavBar.qml

import QtQuick 2.0
import QtQuick.Controls 1.4

Row
{
    id: navigationBar
    height: parent.height / 3
    width: parent.width
    spacing: 15
    anchors.centerIn : parent


    NavButton
    {
        id: selectDevice
    }

    NavButton
    {
        id: deviceConfig
    }

    NavButton
    {
        id: deviceInfo
    }
}

прямо сейчас, когда я наводю курсор мыши на одну из этих навигационных кнопок, все три из них увеличиваются в размерах, в отличие от того, что только одна, над которой я парил, расширяется и меняет цвет. Я надеюсь, что, как и в случае с CSS и Javascript, есть способ нацелить элемент, который является предметом события hover.

Я уже пытался использовать parent в качестве цели состояний, но, похоже, это не работает. Я немного охотился за решением и не вижу ничего очевидного, что позволило бы мне это сделать. Единственная альтернатива, которую я вижу, - это добавлять состояния к каждой отдельной кнопке navButton внутри моего файла navBar.

Я действительно надеюсь, что это не так, поскольку это было бы действительно многословным решением простой проблемы.

Что мне действительно нужно, так это способ нацеливания только на элемент, на котором происходит событие.

Answer 1

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

Rectangle {
    id: navButton
    height: parent.height
    width: parent.width / 3 - 10
    color:  ma.containsMouse ? "red" : "orange"
    property alias hoverEnabled: ma.hoverEnabled

    MouseArea {
        id: ma
        anchors.fill: parent
    }
}

И вы тоже экономите кучу кода. Затем просто наберите hoverEnabled: true для всех кнопок, которые вы хотите навести.

Или вы можете создать вспомогательный тип с именем HoverButton.qml, который будет просто NavButton { hoverEnabled: true }, если вы хотите избежать установки его для каждой кнопки.

Я бы также порекомендовал изменить порядок размещения вашей кнопки:

MouseArea {
    id: navButton
    height: parent.height
    width: parent.width / 3 - 10

    Rectangle {
        anchors.fill: parent
        color: navButton.containsMouse ? "red" : "orange"
    }
}

Это избавляет от необходимости использовать псевдоним свойства, сохраняет один id и позволяет напрямую привязывать к обработчикам области мыши, что вы не можете сделать в исходном коде, не перенаправляя сигнал с помощью дополнительного обработчика и сигнала. .

Наконец, я не думаю, что будет продуктивно смотреть на QML так, как если бы он был HTML, QML - это , а не HTML, и он имеет собственные парадигмы использования.