# Screen (Ecran) ## **Tutoriels vidéo** {% embed url="" %} {% embed url="" %} ## **Comprendre les blocs d'écran** ### **quand l'écran 1 démarre** ![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR5_jJjGNKxevrJsyUB%2F-MR5_qW59ZZjMRFDoyOE%2F1.png?generation=1610723323558615\&alt=media) | Événement | Description | | --------- | ------------------------------------------------------ | | Starts | Exécution lors de la **première** ouverture de l'écran | ### **à l'ouverture de l'écran 1** ![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR5_jJjGNKxevrJsyUB%2F-MR5_qW6CYPhHbmgynqd%2F2.png?generation=1610723323551883\&alt=media) | Événement | Description | | --------- | ---------------------------------------- | | Opens | Exécution à **chaque** ouverture d'écran | ### **lorsque l'écran 1 est pressé en arrière** ![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR5_jJjGNKxevrJsyUB%2F-MR5_qW7be6vNxPiqxFR%2F3.png?generation=1610723323558391\&alt=media) | Événement | Description | | ----------------- | ------------------------------------------------------------------------------------------------ | | BackButtonPressed | S'allume lorsque l'on appuie sur le bouton de retour physique ou à l'écran. (Android uniquement) | ### **dans l'écran 1, appelez le ToggleDrawerMenu** ![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR5_jJjGNKxevrJsyUB%2F-MR5_qW8sE_4PbR-YwLE%2F4.png?generation=1610723323551359\&alt=media) | Fonction | Description | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | ToggleDrawerMenu | Ouvre ou ferme le menu du tiroir, si disponible. Doit être utilisé en conjonction avec le [navigateur à tiroir](https://bastien-dosreis.gitbook.io/thunkable/components/layout/untitled-3) | ### **Les éléments spatiaux à l'horizontale** La propriété `Horizontal Align` vous permet d'espacer horizontalement les éléments dans un écran. ![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR5_jJjGNKxevrJsyUB%2F-MR5_qW9fovutqS5KFE5%2F5.png?generation=1610723323566784\&alt=media) ![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR5_jJjGNKxevrJsyUB%2F-MR5_qWARn1Am07rOkan%2F6.png?generation=1610723323553759\&alt=media) ### **Éléments spatiaux à la verticale** La propriété `Vertical Alignment` vous permet d'espacer verticalement les éléments d'un écran. ![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR5_jJjGNKxevrJsyUB%2F-MR5_qWB0ss5BQSkf8Sj%2F7.png?generation=1610723323557995\&alt=media) ### **Ajouter une couleur ou une image de fond** ![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR5_jJjGNKxevrJsyUB%2F-MR5_qWCIjmJm-on_1Ng%2F8.png?generation=1610723323558110\&alt=media) | Propriété | Description | | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | BackgroundColor | Par défaut (`none`). Sélectionnez n'importe quelle couleur à l'aide du sélecteur de couleur, de la valeur RGBA ou HEX | | BackgroungPicture | Vous pouvez télécharger une image de fond dans votre application ou faire référence à l'adresse d'une image, par exemple `beaver-yellow.png` | ### **Mode de redimensionnement de l'image de fond** Cela détermine comment redimensionner l'image lorsque le cadre ne correspond pas aux dimensions de l'image brute. ![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR5_jJjGNKxevrJsyUB%2F-MR5_qWDQSk49VK0j1Oj%2F9.png?generation=1610723323552322\&alt=media) * Cover: Remplit tout l'écran sans modifier le rapport hauteur et largeur de l'image * Contain: L'image entière sera réduite pour tenir à l'intérieur de l'écran, sans modifier le rapport hauteur/largeur de l'image * Stretch: La hauteur de l'image change pour remplir l'écran dans le sens de la longueur * Repeat: Répétez l'image pour couvrir l'écran. Le rapport entre la hauteur et la largeur de l'image ne changera pas * Center : Positionne l'image au milieu du cadre ### **Activer le défilement** ![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR5_jJjGNKxevrJsyUB%2F-MR5_qWEdm4Kl2S68NV4%2F10.png?generation=1610723323568389\&alt=media) | Propriété | Description | | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Scrollable | Par défaut (`false`). Indique si l'écran peut défiler. Pour que le défilement fonctionne, vous devez également régler la hauteur de votre écran pour qu'il s'adapte au contenu et les composants de votre écran doivent avoir des hauteurs définies en pixels absolus | ### **Cacher (ou montrer) la barre d'état** | Propriété | Description | | ------------- | -------------------------------------------------------------------------------------------- | | ShowStatusBar | Par défaut (`true`). Si elle est définie sur `false`, elle masque la barre d'état supérieure | ### **Thème de la barre d'état** | Propriété | Description | | -------------- | --------------------------------------------------------------------------------------------------------------------------- | | StatusBarStyle | Choisissez entre le `default`, le `light-content` ou le `dark-content` pour définir le thème ou le style de la barre d'état | ### **Opacité de la barre d'état** {% hint style="warning" %} Veuillez noter : La propriété `TranslucentStatusBar` ne fonctionne pour l'instant que sur les appareils Android pour le moment {% endhint %} | Propriété | Description | | -------------------- | -------------------------------------------------------------------------------------------------------- | | TranslucentStatusBar | Par défaut (`false`). Réglé sur `true` pour rendre la barre d'état translucide. Uniquement pour Android. | ### **Couleur de la barre d'état** {% hint style="warning" %} Veuillez noter que la propriété`StatusBarColor` ne fonctionne pour l'instant que sur les appareils Android. {% endhint %} | Propriété | Description | | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | StatusBarColor | Par défaut (`0,0,0,0.53`). Sélectionnez n'importe quelle couleur à l'aide du sélecteur de couleur, de la valeur RGBA ou HEX. Uniquement pour Android. | ### **Orientation du plateau** | Propriété | Description | | ------------------- | --------------------------------------------------------------------------------------------------------------------- | | `ScreenOrientation` | Par Défaut (`all`). Vous pouvez fixer l'orientation de l'écran en mode `portrait (portrait)` et `landscape (paysage)` | ## **Sauvegarder l'écran** Thunkable vous permet de réutiliser un écran, et les blocs associés, dans plusieurs projets grâce à la fonction "Save to my Screens". Vous trouverez le bouton "Save Screen" en haut des propriétés de chaque composant d'écran de votre application. ![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR5_jJjGNKxevrJsyUB%2F-MR5_qWF0aV2eI8EaulI%2F11.png?generation=1610723323561923\&alt=media) ### **Nommez votre écran** Il est important que lorsque vous sauvegardez votre écran, vous utilisiez un nom descriptif et mémorable qui décrit ce que fait votre écran. L'exemple ci-dessous concerne un écran de connexion, qui est souvent réutilisé dans plusieurs projets. ![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR5_jJjGNKxevrJsyUB%2F-MR5_qWG0YycNP8T66uz%2F12.png?generation=1610723323585214\&alt=media) ### **Ajouter un nouvel écran** Une fois que vous avez enregistré un écran, chaque fois que vous cliquez sur le bouton **+** pour ajouter un nouvel écran, vous avez la possibilité d'ajouter un écran vide ou de "Copy from my Screens" (Copier à partir de mes écrans). ![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR5_jJjGNKxevrJsyUB%2F-MR5_qWHVgF_QPAPBvnN%2F13.png?generation=1610723323622319\&alt=media) ### **Choisir un écran sauvegardé** Il suffit de choisir l'écran que vous souhaitez ajouter et de cliquer sur le bouton "**Copy**" pour continuer. ![](https://549775582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fthun%2F-MR5_jJjGNKxevrJsyUB%2F-MR5_qWIHiieBuTIhUx4%2F14.png?generation=1610723323560104\&alt=media)