防止 MouseArea 在子矩形内捕捉点击

问题描述

我有一张全屏地图，我在上面添加了一个鼠标区域：

   Map {
      id: map
      anchors.fill: parent
      plugin: osm
      zoomLevel: 16
      minimumZoomLevel: 13
      maximumZoomLevel: 20

      gesture.enabled: true

      Rectangle {
         id: infoPanel
         // ...

         Button {
            // ...
         }
      }

      MouseArea {
         anchors.fill: parent
         onpressed: {
               infoPanel.visible = false
         }
      }

infoPanel 矩形有时会变得可见，在地图上覆盖一些信息，以及一个触发特定操作的按钮。

现在我已经将鼠标区域添加到地图中，以便在点击地图时隐藏信息面板，这很好用。

但是，当点击信息面板本身的矩形时，信息面板也会被关闭。

如何防止地图上的鼠标区域干扰 infoPanel 内的任何内容？

解决方法

你必须这样做：

1. 您必须将信息面板的 z 值设置为 map.z + 1 并为信息面板定义鼠标区域以捕获鼠标事件。像下面的代码

   Map {
       id: map
       anchors.fill: parent
       plugin: osm
       zoomLevel: 16
       minimumZoomLevel: 13
       maximumZoomLevel: 20
       gesture.enabled: true
   
   Rectangle {
       id: infoPanel
       width: 100
       height: 100
       color: "red"
       z: map.z + 1
   
       MouseArea {
           anchors.fill: parent
   
           onClicked: {
               print("info panel")
           }
       }
   
       Button {
           width: parent.width / 2
           height: width
           anchors.centerIn: parent
           text: "button"
   
           onClicked: {
               print("button")
           }
       }
   }
   
   MouseArea {
       anchors.fill: parent
   
       onPressed: {
           infoPanel.visible = false
           print("map")
       }
   }
   

   }

2. 或者只是将鼠标区域移到信息面板的上方

       Map {
       id: map
       anchors.fill: parent
       plugin: osm
       zoomLevel: 16
       minimumZoomLevel: 13
       maximumZoomLevel: 20
       gesture.enabled: true
   
   MouseArea {
       anchors.fill: parent
   
       onPressed: {
           infoPanel.visible = false
           print("map")
   
       }
   }
   
   Rectangle {
       id: infoPanel
       width: 100
       height: 100
       color: "red"
   
       MouseArea {
           anchors.fill: parent
   
           onClicked: {
               print("info panel")
           }
       }
   
       Button {
           width: parent.width / 2
           height: width
           anchors.centerIn: parent
           text: "button"
   
   
           onClicked: {
               print("button")
   
           }
       }
   }
   

   }