Column QML Type

Posiciona sus hijos en una columna. Más...

• Lista de todos los miembros, incluidos los heredados

Propiedades

• add : Transition
• bottomPadding : real
• leftPadding : real
• move : Transition
• padding : real
• populate : Transition
• rightPadding : real
• spacing : real
• topPadding : real

Señales

• positioningComplete()

Métodos

• void forceLayout()

Descripción detallada

Column es un tipo que posiciona sus elementos hijos a lo largo de una única columna. Puede usarse como una forma conveniente de posicionar verticalmente una serie de elementos sin usar anclas.

Abajo hay una Columna que contiene tres rectángulos de varios tamaños:

Column {
    spacing: 2

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

La Columna posiciona automáticamente estos elementos en una formación vertical, así:

Si un elemento dentro de una Columna no es visible, o si tiene una anchura o altura de 0, el elemento no se colocará y no será visible dentro de la columna. Además, dado que una columna posiciona automáticamente a sus elementos secundarios verticalmente, un elemento secundario dentro de una columna no debe establecer su posición en y ni anclarse verticalmente utilizando las anclas top, bottom, anchors.verticalCenter, fill o centerIn. Si necesita realizar estas acciones, considere posicionar los elementos sin utilizar una Columna.

Tenga en cuenta que los elementos en una Columna pueden utilizar la propiedad adjunta Positioner para acceder a más información sobre su posición dentro de la Columna.

Para obtener más información sobre el uso de Columnas y otros tipos de posicionadores relacionados, consulte Posicionadores de elementos.

Uso de transiciones

Una Columna anima elementos utilizando transiciones específicas cuando se añaden o mueven elementos dentro de una Columna.

Por ejemplo, la Columna de abajo establece la propiedad move a un Transition específico:

Column {
    spacing: 2

    Rectangle { color: "red"; width: 50; height: 50 }
    Rectangle { id: greenRect; color: "green"; width: 20; height: 50 }
    Rectangle { color: "blue"; width: 50; height: 20 }

    move: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }

    focus: true
    Keys.onSpacePressed: greenRect.visible = !greenRect.visible
}

Cuando se pulsa la tecla Espacio, el valor visible del Rectangle verde se alterna. A medida que aparece y desaparece, el Rectangle azul se mueve dentro de la Columna, y la transición move se aplica automáticamente al Rectangle azul:

Véase también Row, Grid, Flow, Positioner, ColumnLayout, y Qt Quick Ejemplos - Posicionadores.

Documentación de propiedades

add : Transition

Esta propiedad contiene la transición que se ejecutará para los elementos que se añadan a este posicionador. Para un posicionador, esto se aplica a:

• Elementos que son creados o reparentados como hijos del posicionador después de que el posicionador haya sido creado.
• Elementos hijos que cambian su propiedad Item::visible de false a true, y por tanto ahora son visibles.

La transición puede utilizar la propiedad ViewTransition para acceder a más detalles sobre el elemento que se está añadiendo. Consulte la documentación de ViewTransition para obtener más detalles y ejemplos sobre el uso de estas transiciones.

Véase también populate, ViewTransition, y Qt Quick Ejemplos - Posicionadores.

Estas propiedades contienen el relleno alrededor del contenido.

move : Transition

Esta propiedad contiene la transición a ejecutar para los elementos que se han movido dentro del posicionador. Para un posicionador, esto se aplica a:

• Elementos hijos que se mueven al ser desplazados debido a la adición, eliminación o reordenación de otros elementos en el posicionador.
• Elementos secundarios que se reposicionan debido al cambio de tamaño de otros elementos del posicionador.

La transición puede utilizar la propiedad ViewTransition para acceder a más detalles sobre el elemento que se está moviendo. Tenga en cuenta, sin embargo, que para esta transición de movimiento, las listas ViewTransition.targetIndexes y ViewTransition.targetItems sólo se establecen cuando esta transición se desencadena por la adición de otros elementos en el posicionador; en otros casos, estas listas estarán vacías. Consulte la documentación de ViewTransition para obtener más detalles y ejemplos sobre el uso de estas transiciones.

Véase también add, populate, ViewTransition, y Qt Quick Ejemplos - Posicionadores.

populate : Transition

Esta propiedad contiene la transición que se ejecutará para los elementos que forman parte de este posicionador en el momento de su creación. La transición se ejecuta cuando el posicionador se crea por primera vez.

La transición puede utilizar la propiedad ViewTransition para acceder a más detalles sobre el elemento que se está añadiendo. Consulte la documentación de ViewTransition para obtener más detalles y ejemplos sobre el uso de estas transiciones.

Véase también add, ViewTransition, y Qt Quick Ejemplos - Posicionadores.

spacing : real

El espaciado es la cantidad de píxeles que quedan vacíos entre elementos adyacentes. El espaciado por defecto es 0.

Véase también Grid::spacing.

Documentación de la señal

positioningComplete()

Esta señal se emite cuando se ha completado el posicionamiento.

Documentación del método

void forceLayout()

Column suele posicionar a sus hijos una vez por fotograma. Esto significa que dentro de los bloques de script es posible que los hijos subyacentes hayan cambiado, pero que la columna aún no se haya actualizado en consecuencia.

Este método fuerza a la Columna a responder inmediatamente a cualquier cambio pendiente en sus hijos.

Nota: los métodos en general sólo deben ser llamados después de que el Componente se haya completado.