Un flow está compuesto por una o más pantallas. Cada pantalla representa un paso en el recorrido del usuario — por ejemplo, un paywall, un cuestionario o una diapositiva con información del producto.

Los elementos de cada pantalla se organizan en una jerarquía de capas.

Para gestionar tus pantallas, capas y elementos, abre la vista predeterminada Screens and Layers. Aquí verás la secuencia de pantallas y la estructura de capas de cada una.

Gestionar pantallas

La sección superior del panel izquierdo muestra todas las pantallas del flow. Cada entrada incluye una etiqueta numerada y una vista previa en miniatura.

• Seleccionar una pantalla: Haz clic en una entrada de pantalla para activarla. El editor visual muestra la pantalla seleccionada y la sección Layers se actualiza para mostrar su jerarquía de capas.
• Añadir una pantalla: Haz clic en el botón en la parte superior de la sección Screens para añadir una nueva pantalla vacía al flow.
• Abrir la biblioteca de plantillas: Haz clic en el botón en la parte superior de la sección Screens para explorar y aplicar plantillas de flow.
• Reordenar pantallas: Arrastra y suelta las entradas de pantalla para cambiar su orden en el flow.

Acciones de pantalla

Haz clic en el icono de tres puntos en una entrada de pantalla para abrir el menú contextual.

Acción	Atajo	Descripción
Play Animation		Vista previa de las animaciones configuradas en esta pantalla
Copy	⌘C / Ctrl+C	Copiar la pantalla al portapapeles
Paste here	⌘V / Ctrl+V	Pegar una pantalla copiada previamente
Duplicate	⌘D / Ctrl+D	Crear una copia de la pantalla y añadirla al flow
Rename		Cambiar el nombre visible de la pantalla
Delete	⌘⌫ / Ctrl+Del	Eliminar la pantalla del flow

Cuando copias o duplicas una pantalla, las acciones de la copia apuntan a los elementos copiados, no a los originales. Esto se aplica a los destinos definidos en las acciones Show, Hide y Select product, incluidas las anidadas dentro de acciones condicionales. Las acciones que hacen referencia a elementos externos a la copia mantienen sus destinos originales; revísalos después de pegar.

Navegar entre pantallas

El orden de las pantallas en la lista no determina la navegación por sí solo. Para conectar pantallas, usa las interacciones de los elementos: configura un botón para llevar al usuario a otra pantalla.

Configuración de la pantalla

Para ver las propiedades y ajustes de la pantalla activa, haz clic en un área vacía de la vista previa de la pantalla. El panel derecho cambiará a la vista de configuración de la pantalla.

IU del sistema

Controla cómo interactúa la pantalla con el hardware del dispositivo.

• Safe area añade relleno para que el contenido no quede tapado por el notch ni las barras del sistema.
• Status bar muestra u oculta la barra de estado del sistema (hora, batería, iconos de señal).

Incluir pantalla en el indicador de progreso

Si añades un elemento Indicador de progreso a tu flow, Adapty lo mostrará en todas las pantallas.

Desmarca Include screen in progress indicator para quitar el indicador de progreso de una pantalla concreta. Úsalo para limpiar las pantallas de bienvenida, el paywall final o cualquier paso que no quieras registrar como progreso.

Diseño de pantalla

La sección Layout determina cómo la pantalla distribuye sus elementos hijos. Estas propiedades están disponibles en cualquier elemento contenedor.

• Free: Los elementos hijos se posicionan de forma independiente.

• Vertical: Los elementos se organizan de arriba a abajo, como una columna flexbox.

• Horizontal: Los elementos se organizan de izquierda a derecha, como una fila flexbox. Para los diseños verticales y horizontales, también puedes configurar el espaciado y la alineación.

• Alignment: Posición del elemento en el eje transversal.

• Gap: Espacio entre elementos adyacentes.

• Distribution: Distribución del espacio entre los elementos hijos y alrededor de ellos.

Diseño RTL

Activa la casilla Mirror for RTL para invertir el diseño en sistemas de escritura que van de derecha a izquierda. El orden de los elementos en los contenedores horizontales se invertirá.

Fondo de pantalla

Fill establece el fondo de pantalla como un color sólido, degradado, imagen o vídeo. El fondo cubre todo el viewport del dispositivo, incluidas las áreas detrás del notch y las barras del sistema, incluso cuando Safe area está activada.

Reproducir el vídeo de fondo en bucle

Activa el interruptor Loop para reproducir el vídeo de fondo de forma continua.

Asignar un ID de medio personalizado

Al igual que con cualquier imagen o vídeo, puedes asignar al fondo de pantalla un ID de medios personalizado para referenciarlo en tu SDK.

Espaciado de pantalla

Ajusta el relleno de pantalla para cada lado (superior, derecho, inferior, izquierdo).

Desplazamiento

Controla el comportamiento del desbordamiento. Activa Vertical scroll para permitir que el contenido de la pantalla se desplace cuando supera la altura del viewport.

Grupos seleccionables

La sección Selectable groups muestra todos los grupos seleccionables de la pantalla actual: desde cuestionarios, productos, pestañas, controles de prueba o cualquier elemento seleccionable personalizado.

Haz clic en una entrada de grupo para renombrarla, cambiar su tipo, ver las variables que expone o eliminarla.

Gestionar capas

Cada elemento de una pantalla se representa como una capa. La sección Layers muestra el orden de los elementos en la pantalla activa.

La estructura en árbol refleja las relaciones padre-hijo. Haz clic en la flecha de cualquier capa padre para expandir o contraer sus hijos.

No puedes crear capas directamente. Cada elemento que añades desde la vista Añadir elemento aparece como una nueva capa en el árbol.

• Seleccionar una capa: Haz clic en una capa para seleccionarla. El editor visual resalta el elemento correspondiente en el lienzo, y el panel derecho muestra sus propiedades de diseño e interacción.
• Reordenar capas: Arrastra y suelta capas dentro del árbol para cambiar su orden dentro del contenedor padre. El orden en el árbol coincide con el orden visual en pantalla.
• Mostrar u ocultar una capa: Pasa el cursor sobre una capa para que aparezca el icono de ojo a su derecha. Haz clic en él para alternar la visibilidad de la capa. Las capas ocultas permanecen en el árbol pero no aparecen en el editor visual ni en el dispositivo. Para controlar la visibilidad con lógica en tiempo de ejecución, usa la visibilidad condicional.
• Contraer todas las capas: Haz clic en el botón de contraer en la esquina superior derecha de la sección Layers para plegar el árbol completo.

Acciones de capa

Haz clic en el icono de tres puntos para abrir el menú contextual.

Acción	Atajo	Descripción
Copy	⌘C / Ctrl+C	Copiar la capa al portapapeles
Paste here	⌘V / Ctrl+V	Pegar una capa copiada previamente como elemento hijo
Duplicate	⌘D / Ctrl+D	Crear una copia de la capa en el mismo contenedor
Rename		Cambiar el nombre de visualización de la capa. Por defecto, las capas usan su contenido o tipo de componente como nombre
Delete	⌘⌫ / Ctrl+Del	Eliminar la capa y todos sus elementos hijos
Wrap		Envolver la capa en un nuevo contenedor: Wrap in Horizontal Container o Wrap in Vertical Container
Unwrap / Ungroup		Eliminar el contenedor envolvente y mover sus elementos hijos un nivel hacia arriba
Move up	↑	Mover la capa una posición hacia arriba en su contenedor padre
Move down	↓	Mover la capa una posición hacia abajo en su contenedor padre