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 était traditionnellement effectué à l'aide de modificateurs. Elle est conçue pour offrir une personnalisation plus approfondie et plus facile.

L'API Styles améliore la flexibilité sur différents formats, 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 le remplissage 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 le style basé 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, au survol, au focus, à la pression), ce qui réduit considérablement le code récurrent par rapport au système de modificateurs.
  • Améliore les transitions d'état animées : l'API Style permet d'animer 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.
  • Simplifie les API de composants : en introduisant un seul paramètre de 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 dans les 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 stylisables. Elle est semblable aux styles CSS et peut être personnalisée localement ou via un thème. Les styles se remplacent les uns les autres. Si vous définissez une propriété deux fois (par exemple, background()), une seule valeur finale est obtenue.
StyleScope Champ de récepteur pour la fonction applyStyle() dans un style. Il fournit des fonctions permettant de définir des propriétés visuelles (remplissage, arrière-plan, bordure, etc.) et d'accéder à l'élément 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 : ajoutez des dépendances

Pour utiliser les API dans votre propre projet, assurez-vous d'utiliser la dernière version alpha de la base Jetpack Compose. Dans votre fichier settings.gradle.kts, ajoutez le dépôt Maven de l'instantané à 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.11.0-alpha06 :

compose = "1.11.0-alpha06"

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" }