如何使用 QML 在父 MouseArea 中包含子鼠标悬停事件? [英] How to include child mouse hover events in the parent MouseArea using QML?

问题描述

我想在 QML 中实现以下场景.

I want to implement the following scenario in QML.

这是 ListView 元素的示例/简化委托:

Here is a sample/simplified delegate for ListView element:

Component {
    Item {
         id: container
         MouseArea {
         anchors.fill: parent
         hoverEnabled: true

         onClicked: {
             container.ListView.view.currentIndex = index
             container.forceActiveFocus();
         }
         onEntered: {
             actionList.state = "SHOW";
             myItem.state = "HOVER"
         }
         onExited: {
             actionList.state = "HIDE";
             myItem.state = "NORMAL"
         }
         Rectangle {
             id: myItem
             color: "gray"
             anchors.fill: parent
             Row {
                 id: actionList
                 spacing: 5; anchors.fill: parent
                 Image {
                     id: helpAction
                     source: ""    //Some image address
                     width: 16; height: 16; fillMode: Image.PreserveAspectFit
                     states: [
                         State {
                             name: "NORMAL"
                             PropertyChanges { target: helpAction; opacity: 0.7 }
                         },
                         State {
                             name: "HOVER"
                             PropertyChanges { target: helpAction; opacity: 1.0 }
                         }
                     ]
                     MouseArea {
                         hoverEnabled: true
                         anchors.fill: parent

                         onEntered: {
                             parent.state = "HOVER";
                         }
                         onExited: {
                             parent.state = "NORMAL";
                         }
                     }
                     states: [
                         State {
                             name: "SHOW"
                             PropertyChanges { target: actionList; visible: false }
                         },
                         State {
                             name: "HIDE"
                             PropertyChanges { target: actionList; visible: true }
                         }
                     ]
                 }

                 //Other action buttons...

                 states: [
                     // `NORMAL` and `HOVER` states definition here...
                 ]
             }
         }
    }
}

但是我对 MouseArea 有问题.
对于 entered 事件，内部 MouseArea (actionButton) 无法正常工作.当鼠标进入操作按钮时，外部 MouseArea 触发 exited 事件.

But I have a problem with MouseArea.
Inner MouseArea (actionButton) does not work properly for entered event. When mouse enters on action button, outer MouseArea fires exited event.

我的代码有错误吗?更一般地说，我如何在 QML 中实现这样的场景?

Is there any mistake in my code? More generally, how can I implement such a scenario in QML?

推荐答案

我遇到了同样的问题，并在 QtQuick 5.0 MouseArea 文档.答案其实很简单.

I was faced by this same problem, and came across the answer in the QtQuick 5.0 documentation for MouseArea. The answer to this is actually quite simple.

如果您想在父 MouseArea 中包含子鼠标悬停事件，请将子 MouseArea 设为父 MouseArea 的子项:

If you want to include child mouse hover events in your parent MouseArea, make you child MouseArea a child of the parent MouseArea:

MouseArea {
    id: parent

    MouseArea {
        id: child
    }
}

因为我有一个自定义的 Widget 类型将用作父视图，所以我最终将 default 属性作为 MouseArea<的子级/代码>:

Since I have a custom Widget type that would be used as the parent view, I ended up with the default property being the children of the MouseArea:

Item {
    default property alias children: mouseArea.data

    MouseArea {
        id: mouseArea
    }
}

这篇关于如何使用 QML 在父 MouseArea 中包含子鼠标悬停事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！