Borrar QML anchor

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 la MouseArea para que pueda 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 sólo intentado fijar mouseArea.anchors a undefined pero tengo un error acerca de ser un anchors propiedad de solo lectura. Luego descubrí AnchorChanges, pero no puedo encontrar la manera de eliminar/borrar el anclaje; configuración anchors.bottom etc. a undefined no funciona.

Answer 1

De acuerdo con docs, establecer un atributo de anclaje a undefined debería funcionar. No acabo entiendo por qué AnchorChanges no permitieron establecer anchors.centerIn, pero se puede solucionar 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. He encontrado que el ajuste indefinido dentro de un estado funciona (si por obras solo quieres 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 INCLUSO si configura todos los anclajes indefinidos en el estado final. Sin embargo, como se mencionó anteriormente, la configuración indefinida en la función antes de cambiar el estado funciona de maravilla. En mi caso, lo configuré en mi MouseArea en onPressed.

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

Encontré que no era necesario mencionar el anclaje en el OnReleased, solo el siguiente estado. onReleased: { plotWindow04Frame.state = "cayó" }

Además, debo mencionar, que la final "cayó" estado no menciona anclas o, simplemente 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í es que estas ventanas de la trama se convertirían translúcida (opacidad: 0,5) mientras se arrastra, pero vuelven a opaco (la opacidad: 1) cuando el usuario los deja)

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