qt - Clear QML anchor

position qt-quick

Question

Tengo un MouseArea que quiero comenzar centrado y luego tener una posición absoluta una vez que se presionan las teclas arriba / abajo / izquierda / derecha. Mi problema es que no sé cómo borrar el ancla en MouseArea para poder especificar una posición absoluta:

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

Al principio, solo intenté configurar mouseArea.anchors como undefined pero obtuve un error acerca de que los anchors son una propiedad de solo lectura. Luego descubrí AnchorChanges, pero no puedo encontrar una manera de eliminar / borrar el ancla; establecer anchors.bottom etc. en undefined no funciona.

Answer 1

De acuerdo con los docs , la configuración de un atributo de anclaje a undefined debería funcionar. No entiendo bien por qué AnchorChanges no permitió establecer anchors.centerIn , pero puede solucionarlo en su función 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;
}

Answer 2

gracias por su ayuda chicos. Descubrí que la configuración indefinida dentro de un estado funciona (si por obras solo quiere decir que no da errores), sin embargo, una vez que el elemento se mueve a otro estado, los anclajes regresan mágicamente (y muy frustrantemente). Esto sucede AÚN si establece todos los anclajes indefinidos en el estado final. Sin embargo, como se mencionó anteriormente, la configuración no definida en la función antes de cambiar el estado funciona muy bien. En mi caso, lo puse en mi mouseArea en onPressed.

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

Descubrí que no era necesario mencionar el ancla en onReleased, solo el siguiente estado. onReleased: {plotWindow04Frame.state = "dropeado"}

Además, debo mencionar que el estado final de "caída" tampoco menciona los anclajes, solo la opacidad.

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

 ]

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

(La idea aquí era que estas ventanas de la trama se volverían translúcidas (opacidad: 0.5) al arrastrar, pero volverían a opacas (opacidad: 1) cuando el usuario las suelta)

Lo que es bueno es que los "rectángulos" de la ventana de trama están inicialmente anclados en la parte inferior de la GUI, pero una vez que el usuario los recoge, pueden colocarlos donde quieran.