Un flow está formado 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 Screens and Layers predeterminada. Desde allí 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 tiene 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.
• 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 pantalla para abrir el menú contextual.

Acción	Atajo	Descripción
Play Animation		Previsualiza las animaciones configuradas en esta pantalla
Copy	⌘C / Ctrl+C	Copia la pantalla al portapapeles
Paste here	⌘V / Ctrl+V	Pega una pantalla copiada anteriormente
Duplicate	⌘D / Ctrl+D	Crea una copia de la pantalla y la añade al flow
Rename		Cambia el nombre visible de la pantalla
Delete	⌘⌫ / Ctrl+Del	Elimina la pantalla del flow

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 hacia 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 secundarios y alrededor de ellos.

Diseño RTL

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

Fondo de pantalla

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

Reproducir vídeo de fondo en bucle

Activa el selector Loop para reproducir el vídeo de fondo en bucle continuo.

Asignar un ID de medio personalizado

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

Espaciado de pantalla

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

Scroll

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

Grupos seleccionables

La sección Selectable groups lista todos los grupos seleccionables de la pantalla actual — provenientes de quizzes, productos, pestañas, toggles de prueba o cualquier elemento seleccionable personalizado.

Haz clic en un grupo para renombrarlo, cambiar su tipo, ver las variables que expone o eliminarlo.

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 de árbol refleja las relaciones entre capas padre e 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ñadas desde la vista Añadir elemento aparecerá 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 visibilidad condicional.
• Contraer todas las capas: Haz clic en el botón 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 anteriormente como 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 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 hijos un nivel 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