Question

CSS使yhour DOM中特定按钮/元素的悬停效果变得非常容易。我正在尝试为台式机应用程序创建一个登陆页面，但是我正试图解决必须为我在main.qml中创建的每个对象复制粘贴特定状态的问题。

在这里我的main.qml

upsert

NavButton.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

    }
}

NavBar.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"
            }
        }
    ]
}

现在，当我将鼠标悬停在这些navButton之一上时，所有三个按钮的大小都会扩大，就像我将鼠标悬停在那一个按钮上一样，可以扩展并更改颜色。我希望像CSS和Javascript一样，有一种方法可以定位作为悬停事件主题的元素。

我已经尝试使用父级作为状态的目标，但这似乎行不通。我已经做了一些寻找解决方案的尝试，但没有发现任何明显的方法可以实现这一目标。我看到的唯一替代方法是向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，它带有自己的用法范例。

定位QML中的特定组件元素

1 个答案: