Changer dynamiquement la couleur de fond

Vous pouvez facilement créer des effets visuels dynamiques en changeant la couleur de fond de votre application.

Par exemple, pour des raisons d'accessibilité, vous pouvez ajouter un bouton qui change l'arrière-plan et la couleur de votre police en un mode à contraste élevé pour les utilisateurs malvoyants.

Il existe deux méthodes principales pour y parvenir : en utilisant les arrière-plans ou le data binding.

Quelle méthode choisir ?

• Utiliser les arrière-plans est idéal pour des scénarios simples avec un nombre limité d'options de couleur prédéfinies.
• Le data binding offre plus de flexibilité, notamment lorsque les couleurs sont déterminées par les entrées des utilisateurs, des données externes ou des conditions complexes.

Voici comment appliquer ces deux techniques :

Méthode 1 : avec les arrière-plans

Grâce à l'arrière-plan, vous pouvez définir différents états visuels et basculer entre eux en fonction des interactions ou des déclencheurs.

1. Sélectionnez le Projet et rendez-vous dans les arrière-plans
2. Changez la couleur de fond
3. Créez un nouvel arrière-plan et choisissez une autre couleur
4. Choisissez un élément déclencheur (par exemple un bouton) et l'action Changer d'arrière-plan

Méthode 2 : avec le data binding

Le data binding vous permet de lier les propriétés d'un écran (comme la couleur de fond) à une variable, ce qui permet des mises à jour dynamiques en fonction des changements de données.

1. Créer une variable
   • Rendez-vous dans la Base de données PandaSuite
   • Cliquez sur + Ajouter une propriété et nommez-la (par exemple, bgColor ). Définissez son type sur Couleur.
2. Lier la couleur de fond
   • Sélectionnez votre écran
   • Dans le panneau Propriétés, trouvez la propriété Couleur de fond.
   • Cliquez sur l'icône de liaison de données et associez-la à votre variable bgColor
3. Modifier la variable dynamiquement
   • Utilisez des interactions pour modifier la variable bgColor .
   • Par exemple, créez un bouton avec une interaction : Définir une variable -> bgColor  -> choisissez une nouvelle couleur.