Styles dans Compose

L'API Style est un nouveau paradigme permettant de personnaliser ou de "styliser" des éléments et des composants dans Jetpack Compose, ce qui se faisait traditionnellement via des modificateurs. Il est conçu pour offrir une personnalisation plus poussée et plus simple.

L'API Styles améliore la flexibilité sur tous les facteurs de forme, offre de meilleures performances et facilite la création de systèmes de conception personnalisés. Même si vous n'avez pas besoin de composants personnalisés, l'API Styles présente de nombreux avantages pour votre système de conception.

Il est important de noter que les styles ne remplacent pas les modificateurs, mais qu'ils remplacent les paramètres de style, tels que la marge intérieure et les couleurs. Nous vous recommandons de passer à l'utilisation de styles plutôt que de paramètres pour plus de flexibilité et de performances.

Avantages des styles

  • Simplifie l'application de styles basée sur l'état : l'API fournit un moyen plus concis et déclaratif de définir des styles qui changent en fonction de différents états (par exemple, pointé, sélectionné, appuyé), ce qui réduit considérablement le code récurrent par rapport au système de modificateurs.
  • Amélioration des transitions d'état animées : l'API Style permet d'animer de manière intégrée les propriétés de style entre les états avec des caractéristiques de performances idéales, en évitant les recompositions qui se produisent avec l'approche animateColorAsState actuelle.
  • Simplification des API de composants : en introduisant un seul paramètre Style pour la personnalisation, les API de composants sont considérablement simplifiées et offrent une plus grande flexibilité.
  • Moins de recompositions, ce qui améliore les performances par rapport aux modificateurs : les styles s'exécutent lors des phases de dessin et de mise en page de Compose, en ignorant la phase de composition.
  • Ensemble d'API plus standardisé : un ensemble standard de propriétés stylistiques permet de styliser n'importe quel composant.

Concepts fondamentaux

Concept Description
Style Interface qui définit l'apparence d'un élément d'interface utilisateur, avec un ensemble standard de propriétés de style. Il est semblable aux styles CSS et peut être personnalisé localement ou via un thème. Les styles s'écrasent les uns les autres. Définir une propriété deux fois (par exemple, background()) génère une seule valeur finale.
StyleScope Champ d'application du récepteur pour la fonction applyStyle() dans un style. Il fournit des fonctions permettant de définir des propriétés visuelles (marge intérieure, arrière-plan, bordure, etc.) et d'accéder au StyleState actuel.
StyleState Fournit un état (par exemple, isEnabled, isPressed, isChecked, états personnalisés) que vous pouvez utiliser dans un style pour définir un style conditionnel.

Premiers pas : ajouter des dépendances

Pour utiliser les API dans votre propre projet, assurez-vous d'utiliser la dernière version alpha de Jetpack Compose Foundation. Dans votre fichier settings.gradle.kts, ajoutez le dépôt Maven d'instantanés à la liste des dépôts à utiliser.

Dans votre fichier libs.versions.toml ou directement dans votre fichier app/build.gradle.kts, définissez la version de Compose sur 1.12.0-alpha03 :

compose = "1.12.0-alpha03"

androidx-compose-runtime = { group = "androidx.compose.runtime", name = "runtime", version.ref = "compose" }
androidx-compose-ui = { group = "androidx.compose.ui", name = "ui", version.ref = "compose" }
androidx-compose-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics", version.ref = "compose" }
androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling", version.ref = "compose" }
androidx-compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview", version.ref = "compose" }
androidx-compose-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest", version.ref = "compose" }
androidx-compose-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4", version.ref = "compose" }
androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation", version.ref = "compose" }
Suivant
Principes de base des styles