2

ここに私の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。

ドキュメントを検索して、そのような動作を防ぐことができる属性を見つけましたが、何も見つかりませんでした。mouseArea1では、とmouseArea2を同時に有効にする方法は?

4

2 に答える 2

7

「構成された」マウス イベント -- clicked、doubleClickedおよびpressAndHold-- プロパティを使用してこれを実現できpropagateComposedEventsます。ただし、ホバー イベントは合成イベントではないため、ここでは機能しません。

MouseAreaそのため、代わりにs が評価される順序を変更する必要があります。

簡単なトリックの 1 つMouseAreaは、QML ソース自体で 2 つの の順序を交換することです。大きい方の後に小さい方を配置すると、小さい方が優先されます。

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

同じことを達成する 2 番目の方法は、下のインデックスよりも大きいzインデックスを最上位に追加することです。MouseAreaデフォルトでは、すべての要素に のzインデックスがあるため、小さい方に0追加するだけでうまくいきます。z: 1MouseArea

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")
        }
    }
}
于 2015-07-28T02:17:59.867 に答える
0

ドキュメントで解決策を見つけました。たとえば、次の 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 が含まれています。後者は、視覚的な積み重ね順序の階層の最上位の項目です。前者の上に視覚的にレンダリングされます。

青色は にRectangle設定propagateComposedEventsされ、受信したすべてのクリック イベントに対してtrueも に設定MouseEvent::acceptedされるため、受信したクリック イベントはその下にある黄色の四角形の に伝播されます。 falseMouseArea

青RectangleをクリックするとonClicked、その子のハンドラMouseAreaが呼び出されます。その後、イベントはMouseAreayellow のに伝播され、Rectangle独自のonClickedハンドラーが呼び出されます。

于 2015-07-28T02:16:10.270 に答える