针对 QML 中的特定组件元素

Question

CSS 让 yhour 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 一样，有一种方法可以定位作为悬停事件主题的元素。

我已经尝试过使用 parent 作为状态的目标，但这似乎不起作用。我已经做了一些寻找解决方案的工作，但我没有看到任何明显的东西可以让我完成这个任务。我看到的唯一选择是将状态添加到我的 navBar 文件中的每个单独的 navButton 。

我真的希望不是这样，因为这将是一个简单问题的非常冗长的解决方案。

我真正需要的是一种仅针对发生事件的元素的方法。

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，它有自己的使用范例。