QML MouseArea, запуск и распространение событий

Question

У меня есть компонент QML с кнопками, ... в нем. Я поместил MouseArea, которая покрывает весь этот компонент, потому что мне нужно выполнять действие везде, где я нажимаю на компонент. Однако я также хочу выполнить действие за MouseArea.

Например, если я нажимаю кнопку в компоненте, я хочу выполнить действие MouseArea, а затем действие кнопки.

Item {

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

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

Еслиопроизвольно скомпоновано: true, то MouseArea onClicked не выполняется, а Button onClicked -. Если false, MouseArea выполняется, но не Button onClicked.

Я хочу, чтобы и MouseArea (первый), и Button (второй) сигнал onClicked были выполнены.

Answer 1

Вам просто нужно установить для принятого свойства мыши значение false.

Item {

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

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

From MouseArea Документация:

Если для установки спутника установлено значениеистина, тогда составленные события будут автоматически распространяться на другие MouseAreas в том же месте на сцене. Каждое событие распространяется на следующую активированную MouseArea под ним в порядке наложения, распространяясь вниз по этой визуальной иерархии, пока MouseArea не примет событие. В отличие от нажатых событий, составные события не будут автоматически приниматься, если нет обработчика.

Если вы хотите исключительно ловить щелчок мышью на одном из них, просто переместите MouseArea под Button относительно ее уровня z. Или просто переместите его определение перед кнопкой.

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
  }
}