鼠标区域中的按钮悬停状态

Question

我想在鼠标区域中使用按钮，当鼠标移到按钮上时，我希望两者都处于悬停状态但是当我移到按钮上时，鼠标区域脱离悬停状态，因为当鼠标移到按钮上时，执行退出的鼠标区域信号

我想要如下图所示的东西 [1]：https://i.sstatic.net/2fQ448aM.gif

我的代码：

Window
{
    visible: true
    minimumWidth: 600
    minimumHeight: 320

    Rectangle
    {
        id: idRec1
        width: 200
        height: 200
        color: itemHovered ? Qt.lighter("red", 1.5) :"red"
        anchors.centerIn: parent

        property bool itemHovered: false

        MouseArea
        {
            anchors.fill: parent
            propagateComposedEvents: true
            hoverEnabled:true

            onEntered: idRec1.itemHovered = true
            onExited: idRec1.itemHovered = false
        }

        Button
        {
            anchors.centerIn: parent
            text: "Button"
        }
    }
}

Answer 1

您可以将 Rectangle+MouseArea 替换为 Frame+矩形，因为 Frame 具有：

• hoverEnabled 属性
• 背景属性

两者都可用于在鼠标进入整行范围时做出反应。

Frame {
    id: frame
    width: 300
    hoverEnabled: true
    background: Rectangle { color: frame.hovered ?  Qt.lighter("red", 1.5) : "red" }
    RowLayout {
        width: parent.width
        IconButton { icon.source: "address-book.svg" }
        Label { Layout.fillWidth:true; text: "New View 1" }
        IconButton { visible:frame.hovered; icon.source: "reset.svg" }
        IconButton { visible:frame.hovered; icon.source: "pencil-square.svg" }
        IconButton { visible:frame.hovered; icon.source: "x.svg" }
    }
}

您可以在线尝试！