qt - 如何使用 QML 在父 MouseArea 中包含子鼠标悬停事件？

Question

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



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

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 有疑问.
内MouseArea (actionButton) 对于 entered 不能正常工作事件。当鼠标进入 Action 按钮时，外部MouseArea火灾 exited事件。

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

Answer 1

我遇到了同样的问题，并在 QtQuick 5.0 documentation for MouseArea 中找到了答案.这个问题的答案其实很简单。

如果你想在你的父级中包含子级鼠标悬停事件 MouseArea ，让你成为 child MouseArea parent 的 child MouseArea :

MouseArea {
    id: parent

    MouseArea {
        id: child
    }
}

由于我有一个自定义 Widget将用作父 View 的类型，我最终得到 default属性是 MouseArea 的子级:

Item {
    default property alias children: mouseArea.data

    MouseArea {
        id: mouseArea
    }
}