Layout y posicionamiento
El Flow Builder crea layouts responsivos. No arrastras elementos a coordenadas exactas; en cambio, los anidas dentro de contenedores que organizan sus elementos hijos automáticamente.
El contenedor define la dirección de los elementos (vertical u horizontal), la alineación y el espaciado. Cada elemento puede ajustar individualmente su tamaño y márgenes o, cuando sea necesario, salir del flujo normal con posicionamiento absoluto o fijo.
Para las propiedades visuales como relleno, bordes y efectos, consulta Estilos y apariencia.
Diseño
El diseño es la herramienta principal para organizar los elementos en pantalla. Cada contenedor distribuye automáticamente sus elementos secundarios según un conjunto de reglas: dirección, alineación y espaciado. Los elementos de diseño disponibles en el builder son:
- Contenedor vertical: Organiza los elementos hijo de arriba a abajo
- Contenedor horizontal: Organiza los elementos hijo de izquierda a derecha
- Divisor: Un separador visual entre elementos
- Carrusel: Un conjunto de diapositivas con desplazamiento horizontal
- Bottom Sheet: Un panel deslizante que muestra contenido adicional cuando el usuario pulsa un botón Los contenedores son los bloques principales de una pantalla. Puedes anidarlos entre sí para construir layouts complejos. Cada contenedor tiene una sección Layout en el panel derecho que controla cómo se distribuyen sus elementos hijos.
Para agrupar elementos en un nuevo contenedor, usa la acción de capa Wrap layer action. Para eliminar un contenedor y ascender sus hijos, usa Unwrap.
Para más detalles sobre la jerarquía de pantallas y capas, consulta Pantallas y capas.
Dirección
- Free: Sin layout automático. Los elementos hijos se posicionan de forma independiente (útil cuando usan posicionamiento absoluto)
- Vertical: Los elementos hijos se apilan de arriba hacia abajo, como filas en una columna
- Horizontal: Los elementos hijos se distribuyen de izquierda a derecha, como ítems en una fila
Orden de los elementos
Los elementos secundarios se renderizan en el orden en que aparecen en el panel Layers. En un contenedor vertical, el elemento situado más arriba en la lista aparece en la parte superior de la pantalla. En un contenedor horizontal, el elemento más arriba aparece a la izquierda. Arrastra los elementos en el panel Layers para reordenarlos, o usa Move Up y Move Down en las acciones de capa.
Alineación
La cuadrícula de alineación controla dónde se colocan los elementos hijos a lo largo del eje transversal del contenedor. En un contenedor vertical, la alineación controla la posición horizontal de los hijos (izquierda, centro o derecha). En un contenedor horizontal, controla su posición vertical (arriba, al medio o abajo).
Distribución
La distribución determina cómo se divide el espacio entre los elementos hijos a lo largo del eje principal:
- Gap (predeterminado): Un valor fijo en píxeles entre elementos hijos adyacentes
- Space Between: Los hijos se extienden hasta los bordes; aparecen espacios iguales entre ellos
- Space Around: Un espacio igual rodea a cada hijo, con espacios de la mitad de tamaño en los bordes
- Space Evenly: Espacio igual antes, entre y después de todos los hijos
Recortar contenido
Recorta visualmente el contenido que sobresale más allá de los límites del contenedor. Desactívalo para permitir el desbordamiento (por ejemplo, una insignia que intencionalmente sobresale del borde de la tarjeta).
Posición
Por defecto, la posición de cada elemento la determina automáticamente el layout de su contenedor. El toggle Position te permite sacarlo del flujo normal y posicionarlo manualmente.
Relativo (predeterminado)
El elemento permanece en el flujo normal del diseño. Su posición la determina automáticamente el contenedor padre según sus reglas de maquetación: no se puede arrastrar libremente. Usa Margin para ajustar el espacio alrededor de un elemento relativo.
Usa el posicionamiento relativo para la gran mayoría del contenido: bloques de texto, imágenes, tarjetas, botones y elementos de lista.
Absoluta
El elemento se extrae del flujo normal y se superpone sobre el resto del contenido. Ya no afecta al diseño de los elementos vecinos.
Al seleccionar Absolute, aparecen controles adicionales:
- Campos de desplazamiento (T, L, R, B): Establece la distancia en píxeles desde el elemento hasta cada borde de su contenedor padre
- Cuadrícula de anclaje: Haz clic en un punto de la cuadrícula 3×3 para elegir a qué esquina, borde o centro del padre se ancla el elemento
- Anclaje horizontal (Left / Center / Right) y Anclaje vertical (Top / Center / Bottom): Menús desplegables que controlan el mismo punto de anclaje que la cuadrícula
- Z-index: Campo numérico que controla el orden de apilamiento del elemento respecto a sus hermanos. Los elementos con valores más altos aparecen encima Usa posicionamiento absoluto para superposiciones decorativas, insignias, botones de cierre e iconos colocados sobre imágenes.
Para que un elemento absoluto ocupe todo el ancho de su contenedor, establece el anclaje horizontal en Left, luego añade un desplazamiento Right de 0. El elemento quedará anclado a ambos bordes.
Fijo
El elemento ignora completamente su contenedor padre y se ancla a la pantalla. Permanece visible mientras el usuario hace scroll: el contenido de la página se mueve por debajo de él. El posicionamiento fijo usa los mismos controles que el posicionamiento absoluto (desplazamientos, cuadrícula de anclaje, índice Z). Todos los desplazamientos son relativos al área segura de la pantalla en lugar del elemento padre. Por ejemplo, un desplazamiento de 0 desde la parte inferior mantiene el elemento por encima del indicador de inicio. Para medir los desplazamientos desde los bordes físicos de la pantalla, activa Ignorar área segura. Usa la posición fija para los elementos que deben flotar sobre el contenido que se desplaza sin reservar espacio, como botones flotantes de cerrar o restaurar, banners superiores persistentes, controles de volver arriba y barras de navegación. Para un área de acción dedicada en la parte inferior, usa un Footer en su lugar.
Ignorar el área segura
El área segura es la parte de la pantalla que queda libre del notch, la barra de estado y el indicador de inicio. Por defecto, los elementos posicionados se mantienen dentro de ella.
Marca la casilla Ignore safe area que aparece debajo del selector de tipo de posición para medir los desplazamientos del elemento desde los bordes físicos de la pantalla. De este modo, el elemento puede extenderse detrás del notch y del indicador de inicio.
Usa esto para medios a sangre completa: posiciona una imagen o vídeo como Fixed, establece los cuatro offsets a 0 y selecciona Ignore safe area. El contenido ocupa toda la pantalla de borde a borde.
La casilla solo funciona con posicionamiento absoluto y fijo. Para elementos relativos está deshabilitada, y si vuelves un elemento a Relative, la configuración se borra.
Tamaño
Cada elemento tiene controles de Width y Height. Haz clic en el desplegable para elegir el modo de dimensionado:
- Fill: El elemento se expande para ocupar todo el espacio disponible en su contenedor. El valor en píxeles que se muestra es el resultado calculado.
- Hug: El elemento se encoge para ajustarse a su contenido. El valor en píxeles que se muestra es el resultado calculado.
- Fixed: El elemento usa exactamente el valor en píxeles que especifiques, independientemente del tamaño del contenedor o del contenido. Es el único modo disponible para elementos con posicionamiento absoluto o fijo.
Espaciado
Ajusta los valores de espaciado de forma independiente para cada lado del elemento.
- Margin: El espacio entre el elemento y sus vecinos. No se extiende más allá de los límites del contenedor padre, independientemente de su valor.
- Padding: El espacio entre el borde del elemento y su contenido.
Los elementos de texto solo tienen margin. Las pantallas solo tienen padding. Ambos están disponibles para contenedores y otros elementos con contenido hijo.
Orden de apilamiento
Los elementos relativos nunca se superponen entre sí: cada contenedor coloca sus hijos en secuencia. La superposición solo ocurre cuando un elemento sale del flujo normal con posicionamiento Absolute o Fixed.
Cuando los elementos se superponen, los hermanos posteriores en el panel Layers se renderizan por encima de los anteriores, incluso cuando el hermano posterior es relativo y el anterior es absoluto. Los elementos Absolute y Fixed tienen un campo Z-index para un control más preciso: los valores más altos tienen prioridad. Los elementos Relative no tienen Z-index — solo el orden de capas determina su posición en la pila.
Usa las acciones de capa Move up y Move down para cambiar el orden de los elementos.