web-dev-qa-db-ja.com

QMLアンカーをクリアする

中央から始めて、上/下/左/右のキーを押すと絶対位置になりたいMouseAreaがあります。私の問題は、絶対位置を指定できるように、MouseAreaのアンカーをクリアする方法がわからないことです。

import QtQuick 2.0
import QtQuick.Window 2.0

Window {
    id: screen
    width: 360
    height: 360
    visible: true

    Rectangle {
        anchors.fill: parent

        states: [
            State {
                name: "moved"
                AnchorChanges {
                    target: mouseArea
                    anchors.bottom: undefined
                    anchors.left: undefined
                    anchors.right: undefined
                    anchors.top: undefined
                }
            }
        ]

        MouseArea {
            id: mouseArea
            anchors.centerIn: parent
            width: 250
            height: 250
            focus: true
            onClicked: console.log("clicked!")
            onPositionChanged: console.log("position changed!")

            function moveMouseArea(x, y) {
                mouseArea.x += x;
                mouseArea.y += y;
                mouseArea.state = "moved";
                mouseAreaPosText.text = 'Mouse area was moved... new pos: '
                    + mouseArea.x + ', ' + mouseArea.y;
            }

            Keys.onPressed: {
                if (event.key === Qt.Key_Up)
                    moveMouseArea(0, -1);
                if (event.key === Qt.Key_Down)
                    moveMouseArea(0, 1);
                if (event.key === Qt.Key_Left)
                    moveMouseArea(-1, 0);
                if (event.key === Qt.Key_Right)
                    moveMouseArea(1, 0);
            }

            Rectangle {
                anchors.fill: parent
                border.width: 2
                border.color: "black"
                color: "transparent"
            }

            Text {
                id: mouseAreaPosText
                anchors.centerIn: parent
            }
        }
    }
}

最初は、mouseArea.anchorsをundefinedに設定しようとしましたが、anchorsが読み取り専用プロパティであるというエラーが発生しました。その後、AnchorChangesを発見しましたが、アンカーを削除/クリアする方法が見つかりません。 anchors.bottomなどをundefinedに設定しても機能しません。

qtpositionqmlqt-quick
23
Mitch

docs によると、アンカー属性をundefinedに設定すると機能するはずです。 AnchorChangesがanchors.centerInの設定を許可しなかった理由はよくわかりませんが、moveMouseArea関数で回避できます。

function moveMouseArea(x, y) {
    mouseArea.anchors.centerIn = undefined; // <-- reset anchor before state change
    mouseArea.pos.x += x;
    mouseArea.pos.y += y;
    mouseArea.state = "moved";
    mouseAreaPosText.text = 'Mouse area was moved... new pos: '
        + mouseArea.pos.x + ', ' + mouseArea.pos.y;
}
26
sergk

助けてくれてありがとう。状態内で未定義の設定が機能することを発見しました（機能によってエラーが発生しないことだけを意味する場合）が、要素がさらに別の状態に移動すると、アンカーは魔法のように（そして非常にイライラして）戻ります。これは、すべてのアンカーを最終状態で未定義に設定した場合でも発生します。ただし、前述のように、状態を変更する前に関数でundefinedを設定すると効果的です。私の場合、onPressedのmouseAreaに設定しました。

                onPressed: {
                plotWindow04Frame.anchors.bottom = undefined
                plotWindow04Frame.anchors.left = undefined
                plotWindow04Frame.state = "inDrag"
            }

OnReleasedのアンカーについて言及する必要はなく、次の状態であることがわかりました。 onReleased：{plotWindow04Frame.state = "dropped"}

また、最後の「ドロップ」状態はアンカーについても言及しておらず、不透明度についてのみ言及していることにも言及する必要があります。

    states: [
    State {
        name: "inDrag"
        PropertyChanges {
            target: plotWindow04Frame
            opacity: .5
        }
    },
    State {
        name: "dropped"
        PropertyChanges {
            target: plotWindow04Frame
            opacity: 1
        }
    }

 ]

    transitions: Transition {
        NumberAnimation { properties: "opacity"; duration:200 }
    }
}

（ここでの考え方は、これらのプロットウィンドウはドラッグ中に半透明（不透明度：0.5）になりますが、ユーザーがドロップすると不透明（不透明度：1）に戻るというものでした）

素晴らしい点は、プロットウィンドウの「長方形」が最初はGUIの下部に固定されていることですが、ユーザーがそれらを選択すると、好きな場所に配置できます。

1
ultramanjones