Posicionadores de elementos

Los ítems posicionadores son ítems contenedores que gestionan las posiciones de los ítems en una interfaz de usuario declarativa. Los posicionadores se comportan de manera similar a los gestores de diseño utilizados con los widgets Qt estándar, excepto que también son contenedores por derecho propio.

Los posicionadores facilitan el trabajo con muchos elementos cuando es necesario organizarlos en un diseño regular.

Qt Quick Los maquetadores también pueden utilizarse para organizar los elementos de Qt Quick en una interfaz de usuario. Gestionan tanto las posiciones como los tamaños de los elementos de una interfaz de usuario declarativa, y son muy adecuados para las interfaces de usuario redimensionables.

Posicionadores

El conjunto básico de tipos gráficos de Qt Quick incluye una serie de posicionadores estándar:

Elementos de columna

Column se utilizan para organizar elementos verticalmente. El siguiente ejemplo utiliza un elemento Columna para organizar tres elementos Rectangle en un área definida por un Item exterior. La propiedad spacing está configurada para incluir una pequeña cantidad de espacio entre los rectángulos.

import QtQuick

Item {
    width: 310; height: 170

    Column {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter

        spacing: 5

        Rectangle { color: "lightblue"; radius: 10.0
                    width: 300; height: 50
                    Text { anchors.centerIn: parent
                           font.pointSize: 24; text: "Books" } }
        Rectangle { color: "gold"; radius: 10.0
                    width: 300; height: 50
                    Text { anchors.centerIn: parent
                           font.pointSize: 24; text: "Music" } }
        Rectangle { color: "lightgreen"; radius: 10.0
                    width: 300; height: 50
                    Text { anchors.centerIn: parent
                           font.pointSize: 24; text: "Movies" } }
    }
}

Tenga en cuenta que, dado que Columna hereda directamente de Elemento, cualquier color de fondo debe ser añadido a un Rectángulo padre, si se desea.

Elementos de fila

Row se utilizan para organizar elementos horizontalmente. El siguiente ejemplo utiliza un elemento Fila para organizar tres elementos redondeados Rectangle en un área definida por un Rectángulo de color exterior. La propiedad spacing está configurada para incluir una pequeña cantidad de espacio entre los rectángulos.

Nos aseguramos de que el Rectángulo padre es lo suficientemente grande para que quede algo de espacio alrededor de los bordes del elemento Fila centrado horizontalmente.

import QtQuick

Rectangle {
    width: 320; height: 110
    color: "#c0c0c0"

    Row {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter

        spacing: 5

        Rectangle { width: 100; height: 100; radius: 20.0
                    color: "#024c1c" }
        Rectangle { width: 100; height: 100; radius: 20.0
                    color: "#42a51c" }
        Rectangle { width: 100; height: 100; radius: 20.0
                    color: "white" }
    }
}

Elementos de rejilla

Grid se utilizan para colocar elementos en una cuadrícula o tabla. El siguiente ejemplo utiliza un elemento Grid para colocar cuatro elementos Rectangle en una cuadrícula de 2 por 2. Al igual que con los otros posicionadores, el espaciado entre elementos puede especificarse utilizando la propiedad spacing.

import QtQuick

Rectangle {
    width: 112; height: 112
    color: "#303030"

    Grid {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        columns: 2
        spacing: 6

        Rectangle { color: "#aa6666"; width: 50; height: 50 }
        Rectangle { color: "#aaaa66"; width: 50; height: 50 }
        Rectangle { color: "#9999aa"; width: 50; height: 50 }
        Rectangle { color: "#6666aa"; width: 50; height: 50 }
    }
}

No hay diferencia entre el espaciado horizontal y vertical insertado entre elementos, por lo que cualquier espacio adicional debe añadirse dentro de los propios elementos.

Cualquier celda vacía en la rejilla debe crearse definiendo elementos marcadores de posición en los lugares apropiados de la definición de Rejilla.

Elementos de flujo

Flow se utilizan para colocar elementos como palabras en una página, con filas o columnas de elementos no superpuestos.

Los elementos de flujo organizan los elementos de forma similar a los elementos de Grid, con elementos organizados en líneas a lo largo de un eje (el eje menor), y líneas de elementos colocadas unas junto a otras a lo largo de otro eje (el eje mayor). La dirección del flujo, así como el espaciado entre elementos, se controlan mediante las propiedades flow y spacing.

El siguiente ejemplo muestra un elemento Flow que contiene varios elementos secundarios Text. Estos están dispuestos de forma similar a los mostrados en las capturas de pantalla.

import QtQuick

Rectangle {
    color: "lightblue"
    width: 300; height: 200

    Flow {
        anchors.fill: parent
        anchors.margins: 4
        spacing: 10

        Text { text: "Text"; font.pixelSize: 40 }
        Text { text: "items"; font.pixelSize: 40 }
        Text { text: "flowing"; font.pixelSize: 40 }
        Text { text: "inside"; font.pixelSize: 40 }
        Text { text: "a"; font.pixelSize: 40 }
        Text { text: "Flow"; font.pixelSize: 40 }
        Text { text: "item"; font.pixelSize: 40 }
    }
}

Las principales diferencias entre los posicionadores Grid y Flow son que los ítems dentro de un Flow se envolverán cuando se queden sin espacio en el eje menor, y los ítems en una línea pueden no estar alineados con los ítems en otra línea si los ítems no tienen tamaños uniformes. Al igual que con los elementos de la Cuadrícula, no existe un control independiente del espaciado entre elementos y entre líneas de elementos.

Otras formas de posicionar elementos

Existen otras formas de posicionar elementos en una interfaz de usuario. Además de la técnica básica de especificar sus coordenadas directamente, pueden posicionarse en relación a otros elementos con anclas, o utilizarse con Modelos de Datos QML como el Modelo de Objeto.