qml中关于多个MouseArea之间的事件传递(propagateComposedEvent)

import QtQuick 2.0

Rectangle {
color: “yellow”
width: 100; height: 100

  MouseArea {
      anchors.fill: parent
      onClicked: console.log("clicked yellow")
  }

  Rectangle {
      color: "blue"
      width: 50; height: 50

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

}

在帮助文档中,propagateComposedEvents属性,当为true时,可以传递鼠标事件。默认值为false。在设置propagateComposedEvents属性后,点击事件触发后,添加一行代码 mouse.accepted = false ,,鼠标事件即可通过该MouseArea传递到其下层(Mousea之间的关系不一定非要是parent关系),若不加mouse.accepted = false 则设置propagateComposedEvents属性是无效的,以上代码可在Qt帮助文档中看到,由于Mousea组件默认鼠标事件无法传递,故可设置模态和非模态界面

补充下

import QtQuick 2.0

Rectangle {
color: “yellow”
width: 100; height: 100

  MouseArea {
      anchors.fill: parent
      onClicked: {
          console.log("clicked yellow");
          }
        onPressed:{
              console.log("Pressed yellow")
          }
          onReleased:{
              console.log("Released yellow");
          }
  }

  Rectangle {
      color: "blue"
      width: 50; height: 50

      MouseArea {
          anchors.fill: parent
          propagateComposedEvents: true
          onClicked: {
              console.log("clicked blue")
              mouse.accepted = false
          }
          onPressed:{
              console.log("Pressed blue")
              mouse.accepted = false;
          }
          onReleased:{
              console.log("Released blue");
              mouse.accepted = false;
          }
      }
  }

}

pressed released clicked事件的先后顺序
对于blue进行操作;
注掉pressed和released事件,yellow 只触发了 clicked事件
注掉clicked和released事件,yellow三个事件都触发了
注掉clicked和pressed事件,yellow只触发了released事件

可以看出,pressed信号优先,blue被mouse.accepted = false之后,blue便不可触发信号。

你可能感兴趣的:(Qt)