3

次のコードは、赤い四角形と灰色の四角形を含む白い四角形を生成します。すべての長方形には関連付けられた 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")}
           }
       }
   }

}

4

1 に答える 1

6

ドラッグ＆ドロップ操作が必要だと思います。そのためには、赤い四角形に 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
            }
        }
    }
}

灰色の四角形を移動したくない場合は、非表示のドラッグ可能なアイテムを追加できます。

    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
    }                    
}
于 2013-09-26T17:31:49.500 に答える