QML - MouseArea/MouseEvent問題

Question

以下代碼段生成一個包含紅色矩形和灰色矩形的白色矩形。每個矩形都有一個關聯的MouseArea。當鼠標在裏面點擊時，灰色矩形會變成藍色。當鼠標光標進入時，紅色矩形會打印控制檯消息，而當釋放的信號發出時，將顯示另一條消息。

我想：

1. 按住灰色矩形內的鼠標按鈕（成爲藍色）
2. 移動光標的灰色/藍色矩形之外，然後將紅色矩形內，而不釋放該按鈕並捕獲輸入的紅色矩形信號
3. 釋放光標在紅色矩形內的按鈕並捕獲紅色矩形的釋放信號。

可能嗎？使用當前代碼，只有在進入時未按下mopuse按鈕纔會發出紅色矩形的輸入信號，並且只有在該矩形內按下按鈕時纔會發出釋放信號。顯然，問題在於，如果在那裏按下按鈕，灰色/藍色矩形將控制鼠標事件。

這是一個類似的，但簡化的場景，我正在開發一個應用程序。

import QtQuick 2.0 

Rectangle{ 
    color: "white" 
    height: 210 
    width: 500 

    MouseArea{ 
     id: mainMa 
     anchors.fill: parent 
     hoverEnabled: true 
     onReleased:{console.log("white-released")} 
    } 

    Column{ 
     spacing: 10 
     Rectangle{ 
      color: "red" 
      height: 100 
      width: 500 
      MouseArea{ 
      anchors.fill: parent 
      hoverEnabled: true 
      propagateComposedEvents: true 
      onEntered:{console.log("red-enter")} 
      onReleased:{console.log("red-released")} 
      } 
     } 

     Rectangle{ 
      color: "#666666" 
      height: 100 
      width: 500 
      MouseArea{ 
       id: ma 
       anchors.fill: parent 
       hoverEnabled: true 
       onPressed: {parent.color = "blue"; console.log("grey pressed")} 
       onReleased: {parent.color = "#666666"; console.log("grey released")} 
      } 
     } 
    } 

}

Answer 1

我想你想拖動&拖放操作。對於這一點，添加DropArea在你的紅色矩形，並積極拖動灰色矩形

類似的東西（最少的代碼）：

Rectangle { 
    Column { 
     Rectangle { 
      id: redRect 
      DropArea { 
       anchors.fill: parent 
       onEntered: { console.log("red-enter") } 
       onDropped: { console.log("red-released") } 
      } 
     } 
     Rectangle { 
      id: greyRect 
      Drag.active: mousearea.drag.active 
      Drag.hotSpot.x: mousearea.mouseX 
      Drag.hotSpot.y: mousearea.mouseY 
      MouseArea { 
       id: mousearea 
       anchors.fill: parent 
       onReleased: parent.Drag.drop() 
       drag.target: parent 
      } 
     } 
    } 
} 

如果你不想動灰色的矩形，你可以添加隱形拖動item：

MouseArea { 
    id: mousearea 
    anchors.fill: parent 
    onReleased: dargItem.Drag.drop() 
    drag.target: dargItem 
    Item { 
     id: dargItem 
     x: mousearea.mouseX 
     y: mousearea.mouseY 
     width: 1; height: 1 
     Drag.active: mousearea.drag.active 
     Drag.hotSpot.x: 1 
     Drag.hotSpot.y: 1 
    }      
}