Posicionamiento con anclas

Además de los más tradicionales Grid, Row, y Column, Qt Quick también ofrece una forma de maquetar elementos utilizando el concepto de anclas. Cada elemento tiene un conjunto de 7 "líneas de anclaje" invisibles: left horizontalCenter , right, top, verticalCenter, baseline y bottom.

La línea de base (no representada arriba) corresponde a la línea imaginaria sobre la que se situaría el texto. Para los elementos sin texto es igual que la parte superior.

El sistema de anclaje Qt Quick permite definir relaciones entre las líneas de anclaje de los distintos elementos. Por ejemplo, puede escribir:

Rectangle { id: rect1; ... }
Rectangle { id: rect2; anchors.left: rect1.right; ... }

En este caso, el borde izquierdo de rect2 está unido al borde derecho de rect1, produciendo lo siguiente:

Puede especificar múltiples anclas. Por ejemplo:

Rectangle { id: rect1; ... }
Rectangle { id: rect2; anchors.left: rect1.right; anchors.top: rect1.bottom; ... }

Especificando múltiples anclas horizontales o verticales puede controlar el tamaño de un elemento. Abajo, el rect2 está anclado a la derecha del rect1 y a la izquierda del rect3. Si cualquiera de los rectángulos azules se mueve, el rect2 se estirará y encogerá según sea necesario:

Rectangle { id: rect1; x: 0; ... }
Rectangle { id: rect2; anchors.left: rect1.right; anchors.right: rect3.left; ... }
Rectangle { id: rect3; x: 150; ... }

También existen algunas anclas de conveniencia. anchors.fill es una ancla de conveniencia que equivale a establecer las anclas izquierda, derecha, superior e inferior a la izquierda, derecha, superior e inferior del elemento de destino. anchors.centerIn es otra ancla de conveniencia, y equivale a establecer las anclas verticalCenter y horizontalCenter a las verticalCenter y horizontalCenter del elemento de destino.

Márgenes y desplazamientos de anclaje

El sistema de anclaje también permite especificar márgenes y desplazamientos para los anclajes de un elemento. Los márgenes especifican la cantidad de espacio vacío que debe dejarse en el exterior del anclaje de un elemento, mientras que los desplazamientos permiten manipular el posicionamiento utilizando las líneas de anclaje centrales. Un elemento puede especificar sus márgenes de anclaje individualmente a través de leftMargin, rightMargin, topMargin y bottomMargin, o utilizar anchors.margins para especificar el mismo valor de margen para los cuatro bordes. Los desplazamientos de anclaje se especifican mediante horizontalCenterOffset, verticalCenterOffset y baselineOffset.

El siguiente ejemplo especifica un margen izquierdo:

Rectangle { id: rect1; ... }
Rectangle { id: rect2; anchors.left: rect1.right; anchors.leftMargin: 5; ... }

En este caso, se reserva un margen de 5 píxeles a la izquierda de rect2, produciendo lo siguiente:

Cambio de anclajes

Qt Quick proporciona el tipo AnchorChanges para especificar las anclas de un estado.

State {
    name: "anchorRight"
    AnchorChanges {
        target: rect2
        anchors.right: parent.right
        anchors.left: undefined  //remove the left anchor
    }
}

AnchorChanges pueden animarse utilizando el tipo AnchorAnimation.

Transition {
    AnchorAnimation {}  //animates any AnchorChanges in the corresponding state change
}

Las anclas también pueden cambiarse imperativamente dentro de JavaScript. Sin embargo, estos cambios deben ordenarse cuidadosamente, o pueden producir resultados inesperados. El siguiente ejemplo ilustra esta cuestión:

// May produce unexpected results
Rectangle {
    width: 50
    anchors.left: parent.left

    function reanchorToRight() {
        anchors.right = parent.right
        anchors.left = undefined
    }
}

Cuando se llama a reanchorToRight, la función establece primero el ancla derecha. En ese momento, se establecen las anclas izquierda y derecha, y el elemento se estirará horizontalmente para llenar su padre. Cuando se desactive el ancla izquierda, se mantendrá la nueva anchura. Por lo tanto, al actualizar los anclajes en JavaScript, primero debe deshacer los anclajes que ya no sean necesarios y, a continuación, establecer los nuevos anclajes necesarios, como se muestra a continuación:

// Correct code
Rectangle {
    width: 50
    anchors.left: parent.left

    function reanchorToRight() {
        anchors.left = undefined
        anchors.right = parent.right
    }
}

Dado que el orden de evaluación de los anclajes no está definido, no se recomienda cambiar los anclajes mediante anclajes condicionales, ya que esto puede provocar el problema de ordenación descrito anteriormente. En el siguiente ejemplo, Rectangle crecerá hasta alcanzar la anchura total de su padre, ya que los anclajes izquierdo y derecho se establecerán simultáneamente durante la actualización de la vinculación.

// May produce unexpected results
Rectangle {
    width: 50; height: 50
    anchors.left: state == "right" ? undefined : parent.left;
    anchors.right: state == "right" ? parent.right : undefined;
}

Esto debería reescribirse para utilizar AnchorChanges en su lugar, ya que AnchorChanges gestionará automáticamente los problemas de ordenación internamente. A continuación se explica cómo reescribir correctamente el ejemplo anterior:

// Correct code
Rectangle {
    id: rect
    width: 50; height: 50
    anchors.left: parent.left  // initial position

    states: State {
        name: "rightAligned"
        AnchorChanges {
            target: rect
            anchors.left: undefined
            anchors.right: parent.right
        }
    }
    function toggleAnchoring() {
        parent.state = (parent.state == "" ? "rightAligned" : "")
    }
}

Restricciones

Por razones de rendimiento, sólo puede anclar un elemento a sus hermanos y a su padre directo. Por ejemplo, el siguiente anclaje no es válido y produciría una advertencia:

//bad code
Item {
    id: group1
    Rectangle { id: rect1; ... }
}
Item {
    id: group2
    Rectangle { id: rect2; anchors.left: rect1.right; ... }    // invalid anchor!
}

Además, los diseños basados en anclajes no pueden mezclarse con el posicionamiento absoluto. Si un elemento especifica su posición x y además establece anchors.left, o ancla sus bordes izquierdo y derecho pero además establece un width, el resultado es indefinido, ya que no quedaría claro si el elemento debería utilizar anclaje o posicionamiento absoluto. Lo mismo puede decirse de establecer las propiedades y y height de un elemento con anchors.top y anchors.bottom, o establecer anchors.fill así como width o height. Lo mismo se aplica cuando se utilizan posicionadores como Row y Grid, que pueden establecer las propiedades x y y del elemento. Si desea pasar de un posicionamiento basado en anclajes a un posicionamiento absoluto, puede borrar un valor de anclaje estableciéndolo en undefined.