QML MouseArea，触发和传播事件答案

【问题标题】：QML MouseArea, trigger and propagate eventsQML MouseArea，触发和传播事件
【发布时间】：2019-10-30 11:19:06
【问题描述】：

我有一个带有按钮的 QML 组件，... 在里面。我放置了一个覆盖整个组件的 MouseArea，因为我需要在单击组件的任何位置执行操作。但是，我也想执行 MouseArea 后面的动作。

例如，如果我点击组件中的一个按钮，我想执行 MouseArea 动作，然后执行按钮动作。

Item {

  Button{
    anchors: ...
    onClicked: console.info("Button clicked")
  }

  MouseArea{
    anchors.fill: parent
    propagateComposedEvents: true
    onClicked: console.info("MouseArea clicked")
  }
}

如果propagateComposedEvents: true，则不会执行MouseArea onClicked，但会执行Button onClicked。如果为 false，则执行 MouseArea 但不执行 Button onClicked。

我希望同时执行 MouseArea（第一个）和 Button（第二个）信号 onClicked。

【问题讨论】：

我认为您可以致电buttonId.clicked() 来响应MouseArea 的点击信号
确实，这可能是解决方案，但我没有一个按钮。我在 MouseArea 后面有更多组件，我不能将每个操作都放在 MouseArea 点击信号中。
然后，也许，描述你真正想要实现的目标。因为也许，MouseArea 不是你的解决方案

标签： qt qml mouseevent mousearea

【解决方案1】：

您只需要将鼠标的接受属性设置为false即可。

Item {

  Button{
    anchors: ...
    onClicked: console.info("Button clicked")
  }

  MouseArea{
    anchors.fill: parent
    propagateComposedEvents: true
    onClicked: {
        console.info("MouseArea clicked");
        mouse.accepted =false;
  }
}

来自MouseArea 文档：

如果将propagateComposedEvents 设置为true，则组合事件将自动传播到同一位置的其他 MouseArea 在场景中。每个事件都传播到下一个启用的 MouseArea 以堆叠顺序在其下方，向下传播此视觉效果层次结构，直到 MouseArea 接受事件。与按下事件不同，如果没有处理程序，则不会自动接受组合事件现在。

如果您想专门捕捉鼠标点击其中一个，只需将 MouseArea 移动到 Button 下关于其 z 水平的位置。或者，只需将其定义移到 Button 之前。

Item {
  MouseArea{
    anchors.fill: parent
    onClicked: console.info("MouseArea clicked")
  }

  Button{
    anchors: ...
    onClicked: console.info("Button clicked")
  }
}

或者：

Item {
  Button{
    anchors: ...
    onClicked: console.info("Button clicked")
    z: 1
  }

  MouseArea{
    anchors.fill: parent
    onClicked: console.info("MouseArea clicked")
    z: 0
  }
}

【讨论】：