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 à l'aide de modificateurs. Il est conçu pour permettre une personnalisation plus poussée et plus facile.

L'API Styles améliore la flexibilité sur les différents 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 des paramètres aux styles pour gagner en flexibilité et en performances.

Avantages des styles

  • Simplification du style basé sur l'état : l'API offre un moyen plus concis et déclaratif de définir des styles qui changent en fonction de différents états (par exemple, survolé, sélectionné, appuyé), ce qui réduit considérablement le code passe-partout par rapport au système de modificateurs.
  • Amélioration des transitions d'état animées : l'API Style permet l'animation intégrée des 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 de style pour la personnalisation, les API de composants sont considérablement simplifiées et offrent une plus grande flexibilité.
  • Moins de recompositions pour de meilleures performances avec les 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 de style permet de styliser n'importe quel composant.

Concepts fondamentaux

Concept Description
Style Interface qui définit l'apparence d'un élément d'UI, avec un ensemble standard de propriétés stylables. Il est semblable aux styles CSS et peut être personnalisé 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 appliquée.
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 une mise en forme conditionnelle.

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 du snapshot à 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" }