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.