首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用QML在父MouseArea中包含子鼠标悬停事件?

如何使用QML在父MouseArea中包含子鼠标悬停事件?
EN

Stack Overflow用户
提问于 2013-08-09 04:13:06
回答 2查看 15.3K关注 0票数 29

我想用QML实现以下场景。

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

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事件。

我的代码中有什么错误吗?更广泛地说,我如何在QML中实现这样的场景?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-01-29 00:07:33

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

如果要在父MouseArea中包括子鼠标悬停事件,请使子MouseArea成为父MouseArea的子事件

MouseArea {
    id: parent

    MouseArea {
        id: child
    }
}

由于我有一个将用作父视图的自定义Widget类型,因此我最终将default属性作为MouseArea的子视图

Item {
    default property alias children: mouseArea.data

    MouseArea {
        id: mouseArea
    }
}
票数 33
EN

Stack Overflow用户

发布于 2013-08-09 19:54:09

Iv'e尝试了一些东西,但似乎不可能同时悬停在两个MouseArea上。preventStealingpropagateComposedEvents似乎只在有单击事件时才起作用。但从内部MouseArea,您可以触发另一个的entered()信号。如下所示:

import QtQuick 2.1

Rectangle {
    width: 500
    height: 500

    Rectangle {
        width:300
        height: 300
        color: "red"

        MouseArea {
            id: big
            anchors.fill: parent
            hoverEnabled:true
            onEntered: {
                console.log("ENTERED BIG mousearea");
            }
            onExited: {
                console.log("EXITED BIG mousearea");
            }
        }

        Rectangle {
            anchors.centerIn: parent
            height: 100
            width: 100
            color: "green"

            MouseArea {
                anchors.fill: parent
                hoverEnabled:true
                onEntered: {
                    console.log("ENTERED small mousearea");
                    big.entered();
                }
                onExited: {
                    console.log("EXITED small mousearea");
                    big.exited();
                }
            }
        }
    }
}

问题是,来自包含MouseAreaexited()信号将在再次回调entered()之前被调用。因此,您可能需要“延迟”exited()中的状态更改,以确保您确实希望隐藏操作按钮。另一种解决方案是保存当前鼠标位置并仅在鼠标位于其边界之一时调用exited()时隐藏按钮。

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18135262

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档