Un flow se compose d’un ou plusieurs écrans. Chaque écran représente une étape dans le parcours de l’utilisateur — par exemple, un paywall, un quiz ou une diapositive présentant des informations sur le 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 numéro et un aperçu miniature.

• Sélectionner un écran : Cliquez sur une entrée d’écran pour la rendre active. L’éditeur visuel affiche l’écran sélectionné, et la section Layers en dessous se met à jour pour afficher 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éordonner les écrans : Glissez-déposez les entrées d’écran pour modifier leur ordre dans le flow.

Actions sur les écrans

Cliquez sur l’icône à trois points sur 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

Lorsque vous copiez ou dupliquez un écran, les actions de la copie pointent vers les éléments copiés plutôt que vers les originaux. Cela s’applique aux cibles définies dans les actions Show, Hide et Select product, y compris celles imbriquées dans les actions conditionnelles. Les actions qui font référence à des éléments situés en dehors de la copie conservent leurs cibles d’origine — vérifiez-les après avoir collé.

Naviguer entre les écrans

L’ordre des écrans dans la liste ne détermine pas la navigation en lui-même. Pour relier les écrans, utilisez les interactions d’é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 les paramètres de l’écran actif, cliquez sur une zone vide dans l’aperçu de l’écran. Le panneau de droite 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 pour que le contenu reste à l’écart de l’encoche et des barres système. Les éléments positionnés individuellement peuvent ignorer cet espacement — voir Ignorer la zone de sécurité.
• Status bar affiche ou masque la barre d’état système (heure, batterie, icônes réseau).

Inclure l’écran dans l’indicateur de progression

Si vous ajoutez un élément Indicateur de progression à votre flow, Adapty l’affiche sur chaque écran.

Décochez Include screen in progress indicator pour retirer l’indicateur de progression d’un écran en particulier. Utile pour les écrans d’accueil, le paywall final ou toute étape que vous ne souhaitez pas comptabiliser dans la 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 indépendamment.
• 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 ligne flexbox.

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

• Alignment : Position de l’élément 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.

Disposition RTL

Cochez la case Mirror for RTL pour inverser la disposition pour les systèmes d’écriture se lisant de droite à gauche. L’ordre des éléments dans les conteneurs horizontaux sera inversé.

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 occupe tout le viewport de l’appareil, y compris les zones derrière l’encoche et les barres système — même lorsque Safe area est activée.

Lire la vidéo d’arrière-plan en boucle

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

Attribuer un identifiant média personnalisé

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

Espacement de l’écran

Règle le rembourrage de l’écran pour chaque côté (haut, droite, bas, gauche).

Défilement

Contrôle le comportement en cas de dépassement. Activez le Vertical scroll pour permettre le défilement du contenu de l’écran lorsqu’il dépasse la hauteur de la fenêtre d’affichage.

Groupes sélectionnables

La section Selectable groups liste tous les groupes sélectionnables de l’écran courant — qu’ils viennent 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 Layers affiche l’ordre des éléments sur l’écran actif.

La structure arborescente reflète les relations parent-enfant. Cliquez sur la flèche d’un calque parent pour afficher ou masquer ses enfants.

Vous ne pouvez pas créer de calques directement. Tout élément ajouté via la vue Ajouter un élément apparaît automatiquement 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 de droite affiche ses propriétés de design et d’interaction.
• Réordonner les calques : Faites glisser les calques dans l’arborescence pour modifier leur ordre au sein du conteneur parent. L’ordre dans l’arborescence correspond à l’ordre visuel à l’écran.
• Afficher ou masquer un calque : Survolez un calque pour faire apparaître 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é par la logique à l’exécution, utilisez la visibilité conditionnelle.
• Réduire tous les calques : Cliquez sur le bouton réduire dans le coin supérieur droit de la section Layers 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		Encapsuler le calque dans un nouveau conteneur : Wrap in Horizontal Container ou Wrap in Vertical Container
Unwrap / Ungroup		Supprimer le conteneur englobant 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