Posicionadores y diseños

Existen varias formas de posicionar elementos en QML.

A continuación se ofrece una breve descripción general. Para obtener más información, consulte Conceptos importantes en Qt Quick - Posicionamiento.

Posicionamiento manual

Los elementos pueden colocarse en coordenadas x,y específicas en la pantalla estableciendo sus propiedades x,y. Esto configurará su posición relativa a la esquina superior izquierda de su padre, de acuerdo con las reglas del sistema de coordenadas visuales.

Combinado con el uso de enlaces en lugar de valores constantes para estas propiedades, el posicionamiento relativo también se logra fácilmente mediante el establecimiento de las coordenadas x e y a los enlaces apropiados.

import QtQuick

Item {
    width: 100; height: 100

    Rectangle {
        // Manually positioned at 20,20
        x: 20
        y: 20
        width: 80
        height: 80
        color: "red"
    }
}

Anclajes

El tipo Item ofrece la posibilidad de anclarse a otros tipos Item. Hay siete líneas de anclaje para cada elemento: izquierda, derecha, centro vertical, superior, inferior, línea de base y centro horizontal. Las tres líneas de anclaje verticales pueden anclarse a cualquiera de las tres líneas de anclaje verticales de otro elemento, y las cuatro líneas de anclaje horizontales pueden anclarse a las líneas de anclaje horizontales de otro elemento.

Para más información, consulte Posicionamiento con anclas y la documentación de anchors property.

import QtQuick

Item {
    width: 200; height: 200

    Rectangle {
        // Anchored to 20px off the top right corner of the parent
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.margins: 20 // Sets all margins at once

        width: 80
        height: 80
        color: "orange"
    }

    Rectangle {
        // Anchored to 20px off the top center corner of the parent.
        // Notice the different group property syntax for 'anchors' compared to
        // the previous Rectangle. Both are valid.
        anchors { horizontalCenter: parent.horizontalCenter; top: parent.top; topMargin: 20 }

        width: 80
        height: 80
        color: "green"
    }
}

Posicionadores

Para el caso común de querer posicionar un conjunto de tipos en un patrón regular, Qt Quick proporciona algunos tipos de posicionadores. Los elementos colocados en un posicionador se posicionan automáticamente de alguna manera; por ejemplo, un Row posiciona los elementos para que estén horizontalmente adyacentes (formando una fila).

Para más detalles, consulte Posicionadores de elementos.

import QtQuick

Item {
    width: 300; height: 100

    Row { // The "Row" type lays out its child items in a horizontal line
        spacing: 20 // Places 20px of space between items

        Rectangle { width: 80; height: 80; color: "red" }
        Rectangle { width: 80; height: 80; color: "green" }
        Rectangle { width: 80; height: 80; color: "blue" }
    }
}

Tipos de diseño

Lostipos de disposición funcionan de forma similar a los posicionadores, pero permiten refinar o restringir aún más la disposición. En concreto, los tipos de disposición le permiten:

• ajustar la alineación del texto y otros elementos
• redimensionar y rellenar automáticamente las áreas de aplicación asignadas
• establecer restricciones de tamaño, como dimensiones mínimas o máximas
• establecer el espaciado entre los elementos del diseño

GroupBox {
    id: gridBox
    title: "Grid layout"
    Layout.fillWidth: true

    GridLayout {
        id: gridLayout
        rows: 3
        flow: GridLayout.TopToBottom
        anchors.fill: parent
        Label { text: "Line 1" }
        Label { text: "Line 2" }
        Label { text: "Line 3" }

        TextField { }
        TextField { }
        TextField { }

        TextArea {
            text: "This widget spans over three rows in the GridLayout.\n"
                  + "All items in the GridLayout are implicitly positioned from top to bottom."
            Layout.rowSpan: 3
            Layout.fillHeight: true
            Layout.fillWidth: true
        }
    }
}

El fragmento anterior procede del ejemplo Diseños básicos. El fragmento muestra la simplicidad de añadir varios campos y elementos en un diseño. GridLayout puede cambiar de tamaño y su formato es personalizable a través de varias propiedades.

Para obtener más información sobre los tipos de diseño, visite:

• Qt Quick Descripción general de los diseños
• Ejemplo de diseñobásico