Un flow est composé d’un ou plusieurs écrans. Chaque écran représente une étape du parcours utilisateur — par exemple, un paywall, un quiz ou une diapositive présentant des informations sur un produit.

Les éléments de chaque écran sont organisés selon une hiérarchie de calques.

Pour gérer vos écrans, calques et éléments, ouvrez la vue Screens and Layers par défaut. Elle affiche la séquence de vos écrans ainsi que la structure des calques de chaque écran.

Gérer les écrans

La partie supérieure du panneau gauche liste tous les écrans du flow. Chaque entrée affiche un libellé numéroté et un aperçu miniature.

• Sélectionner un écran : Cliquez sur une entrée pour la rendre active. L’éditeur visuel affiche l’écran sélectionné et la section Calques en dessous se met à jour pour montrer sa hiérarchie de calques.
• Ajouter un écran : Cliquez sur le bouton en haut de la section Screens pour ajouter un nouvel écran vide au flow.
• Ouvrir la bibliothèque de templates : Cliquez sur le bouton en haut de la section Screens pour parcourir et appliquer des templates de flow.
• Réorganiser les écrans : Faites glisser-déposer les entrées pour modifier leur ordre dans le flow.

Actions sur les écrans

Cliquez sur l’icône à trois points d’une entrée d’écran pour ouvrir le menu contextuel.

Action	Raccourci	Description
Play Animation		Prévisualiser les animations configurées sur cet écran
Copy	⌘C / Ctrl+C	Copier l’écran dans le presse-papiers
Paste here	⌘V / Ctrl+V	Coller un écran précédemment copié
Duplicate	⌘D / Ctrl+D	Créer une copie de l’écran et l’ajouter au flow
Rename		Modifier le nom d’affichage de l’écran
Delete	⌘⌫ / Ctrl+Del	Supprimer l’écran du flow

Naviguer entre les écrans

L’ordre des écrans dans la liste ne détermine pas la navigation par lui-même. Pour relier les écrans, utilisez les interactions des éléments : configurez un bouton pour diriger l’utilisateur vers un autre écran.

Paramètres de l’écran

Pour afficher les propriétés et paramètres de l’écran actif, cliquez sur une zone vide de l’aperçu de l’écran. Le panneau droit basculera vers la vue des paramètres de l’écran.

Interface système

Contrôle la façon dont l’écran interagit avec le matériel de l’appareil.

• Safe area ajoute un espacement qui maintient le contenu à l’écart de l’encoche et des barres système. Les éléments positionnés individuellement peuvent désactiver cet espacement — voir Ignore safe area.
• Status bar affiche ou masque la barre d’état système (heure, batterie, signal).

Inclure l’écran dans l’indicateur de progression

Si vous ajoutez un élément Progress Indicator à votre flow, Adapty l’affiche sur chaque écran.

Décochez Include screen in progress indicator pour retirer l’indicateur de progression d’un écran particulier. Utilisez cette option pour soigner l’affichage des écrans de bienvenue, du paywall final ou de toute étape que vous ne souhaitez pas comptabiliser comme progression.

Mise en page de l’écran

La section Layout détermine comment l’écran distribue ses éléments enfants. Ces propriétés sont disponibles sur tout élément conteneur.

• Free : Les éléments enfants sont positionnés de façon indépendante.
• Vertical : Les éléments sont disposés de haut en bas, comme une colonne flexbox.
• Horizontal : Les éléments sont disposés de gauche à droite, comme une rangée flexbox.

Pour les mises en page verticales et horizontales, vous pouvez également configurer l’espacement et l’alignement.

• Alignment : Position des éléments sur l’axe transversal.
• Gap : Espace entre les éléments adjacents.
• Distribution : Répartition de l’espace entre les éléments enfants et autour d’eux.

Mise en page RTL

Cochez la case Mirror for RTL pour inverser la mise en page pour les systèmes d’écriture allant de droite à gauche. L’ordre des éléments dans les conteneurs horizontaux sera retourné.

Arrière-plan de l’écran

Fill définit l’arrière-plan de l’écran avec une couleur unie, un dégradé, une image ou une vidéo. L’arrière-plan couvre l’intégralité de la zone d’affichage de l’appareil, y compris les zones derrière l’encoche et les barres système — même lorsque Safe area est activé.

Boucle de la vidéo d’arrière-plan

Activez le bouton Loop pour lire la vidéo d’arrière-plan en boucle continue.

Assigner un identifiant média personnalisé

Comme pour toute image ou vidéo, vous pouvez assigner un identifiant média personnalisé à l’arrière-plan de l’écran pour le référencer dans votre SDK.

Espacement de l’écran

Ajuste le padding de l’écran pour chaque côté (haut, droite, bas, gauche).

Défilement

Contrôle le comportement en cas de débordement. Activez Vertical scroll pour permettre au contenu de l’écran de défiler lorsqu’il dépasse la hauteur de la zone d’affichage.

Groupes sélectionnables

La section Selectable groups liste tous les groupes sélectionnables de l’écran actuel — issus de quiz, de produits, d’onglets, de bascules d’essai ou de tout élément sélectionnable personnalisé.

Cliquez sur une entrée de groupe pour la renommer, modifier son type, consulter les variables qu’elle expose ou la supprimer.

Gérer les calques

Chaque élément d’un écran est représenté sous forme de calque. La section Calques affiche l’ordre des éléments sur l’écran actif.

L’arborescence reflète les relations parent-enfant. Cliquez sur la flèche d’un calque parent pour développer ou réduire ses enfants.

Vous ne pouvez pas créer de calques directement. Chaque élément ajouté via la vue Add element apparaît comme un nouveau calque dans l’arborescence.

• Sélectionner un calque : Cliquez sur un calque pour le sélectionner. L’éditeur visuel met en surbrillance l’élément correspondant sur le canevas, et le panneau droit affiche ses propriétés de conception et d’interaction.
• Réorganiser les calques : Faites glisser-déposer les calques dans l’arborescence pour modifier leur ordre dans le conteneur parent. L’ordre dans l’arborescence correspond à l’ordre visuel à l’écran.
• Afficher ou masquer un calque : Survolez un calque pour révéler l’icône œil sur sa droite. Cliquez dessus pour basculer la visibilité du calque. Les calques masqués restent dans l’arborescence mais n’apparaissent ni dans l’éditeur visuel ni sur l’appareil. Pour contrôler la visibilité avec une logique à l’exécution, utilisez la visibilité conditionnelle.
• Réduire tous les calques : Cliquez sur le bouton réduire en haut à droite de la section Calques pour replier toute l’arborescence.

Actions sur les calques

Cliquez sur l’icône à trois points pour ouvrir le menu contextuel.

Action	Raccourci	Description
Copy	⌘C / Ctrl+C	Copier le calque dans le presse-papiers
Paste here	⌘V / Ctrl+V	Coller un calque précédemment copié en tant qu’enfant
Duplicate	⌘D / Ctrl+D	Créer une copie du calque dans le même conteneur
Rename		Modifier le nom d’affichage du calque. Par défaut, les calques utilisent leur contenu ou type de composant comme nom
Delete	⌘⌫ / Ctrl+Del	Supprimer le calque et tous ses enfants
Wrap		Envelopper le calque dans un nouveau conteneur : Wrap in Horizontal Container ou Wrap in Vertical Container
Unwrap / Ungroup		Retirer le conteneur enveloppant et déplacer ses enfants d’un niveau vers le haut
Move up	↑	Déplacer le calque d’une position vers le haut dans son conteneur parent
Move down	↓	Déplacer le calque d’une position vers le bas dans son conteneur parent