Как сделать двойной MouseArea вступить в силу?

Question

Вот мой QML код:

Rectangle 
{ 
    ..... 
    Rectangle 
    { 
     ....height and width is smaller than parent 
     MouseArea 
     { 
      id: mouseArea2 
      anchors.fill: parent 
      hoverEnabled: true 

      onEntered: 
      { 
       console.log("enter 2") 
      } 
     } 
    } 


    MouseArea 
    { 
     id: mouseArea1 
     anchors.fill: parent 
     hoverEnabled: true 

     onEntered: 
     { 
      console.log("enter 1") 
     } 
    } 
} 

Только mouseArea1 вступает в силу. Если я удалю mouseArea1, тогда вступает в силу mouseArea2. Поэтому я думаю, что событие мыши должно обрабатываться mouseArea1 и позволить ему не передать mouseArea2.

Я ищу документ, чтобы узнать, какой attr может предотвратить такое поведение, но ничего не найдено. Итак, как позволить mouseArea1 и mouseArea2 вступить в силу одновременно?

Answer 1

Для «скомпонованных» событий мыши - clicked, doubleClicked и pressAndHold - вы можете достичь этого, используя свойство propagateComposedEvents. Но это не сработает, потому что события наведения не состоят из событий.

Так что вам нужно вместо этого изменить порядок, в котором оцениваются MouseArea.

Один простой трюк состоит в том, чтобы поменять порядок двух MouseArea s в источнике QML. Размещая меньшие один за большую, меньшей имеет преимущество:

Rectangle{ 
    //..... 
    MouseArea{ 
     id: mouseArea1 
     anchors.fill: parent 
     hoverEnabled: true 

     onEntered:{ 
      console.log("enter 1") 
     } 
    } 

    Rectangle{ 
     //....height and width is smaller than parent 
     MouseArea{ 
      id: mouseArea2 
      anchors.fill: parent 
      hoverEnabled: true 

      onEntered:{ 
       console.log("enter 2") 
      } 
     } 
    } 
} 

Второй способ, который достигает то же самое, чтобы добавить z индекс к самому верхним MouseArea, что это больше, чем нижний. По умолчанию каждый элемент имеет z индекс 0, так что просто добавление z: 1 к меньшему MouseArea будет делать трюк:

Rectangle{ 
    //..... 
    Rectangle{ 
     //....height and width is smaller than parent 
     MouseArea{ 
      z: 1    // <----------------- 
      id: mouseArea2 
      anchors.fill: parent 
      hoverEnabled: true 

      onEntered:{ 
       console.log("enter 2") 
      } 
     } 
    } 

    MouseArea{ 
     id: mouseArea1 
     anchors.fill: parent 
     hoverEnabled: true 

     onEntered:{ 
      console.log("enter 1") 
     } 
    } 
} 

Answer 2

Я нашел решение в документации. Возьмем, например, следующий код QML:

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

Здесь желтый Rectangle содержит синий прямоугольник. Последний является самым верхним элементом в иерархии визуального порядка укладки; он будет визуально отображаться над первым.

С голубых Rectangle множеств propagateComposedEvents к true, а также устанавливает MouseEvent::accepted в false для всех полученных перешедших событий, любой щелкнул событие, которые он получает распространяется на MouseArea желтый прямоугольник под ним.

При нажатии на синий Rectangle будет вызываться обработчик onClicked его дочернего элемента MouseArea; событие затем будет распространено на MouseArea желтого Rectangle, вызывая его собственный обработчик onClicked.