Die Style API ist ein neues Paradigma zum Anpassen oder „Gestalten“ von Elementen und Komponenten in Jetpack Compose, was bisher über Modifizierer erfolgte. Sie soll eine umfassendere und einfachere Anpassung ermöglichen.
Die Styles API bietet mehr Flexibilität für verschiedene Formfaktoren, eine bessere Leistung und eine einfachere Erstellung benutzerdefinierter Designsysteme. Auch wenn Sie keine benutzerdefinierten Komponenten benötigen, bietet die Styles API viele Vorteile für Ihr Designsystem.
Wichtig: Styles sind kein Ersatz für Modifikatoren, aber sie ersetzen Styling-Parameter wie Padding und Farben. Wir empfehlen, für mehr Flexibilität und Leistung von Parametern auf Stile umzustellen.
Vorteile von Stilen
- Vereinfacht das zustandsbasierte Styling:Die API bietet eine präzisere und deklarative Möglichkeit, Stile zu definieren, die sich je nach Zustand ändern (z. B. „hovered“, „focused“, „pressed“). Dadurch wird im Vergleich zum Modifiers-System deutlich weniger Boilerplate-Code benötigt.
- Verbesserte Übergänge zwischen animierten Status:Mit der Style API können Stilattribute zwischen Status mit idealen Leistungsmerkmalen animiert werden. So werden Recompositions vermieden, die beim aktuellen
animateColorAsState-Ansatz auftreten. - Vereinfachte Komponenten-APIs:Durch die Einführung eines einzelnen Style-Parameters für die Anpassung werden Komponenten-APIs erheblich vereinfacht und bieten mehr Flexibilität.
- Weniger Neukompositionen führen zu einer besseren Leistung als Modifikatoren:Stile werden in den Phasen „Draw“ und „Layout“ von Compose ausgeführt und die Phase „Composition“ wird übersprungen.
- Standardisierte APIs:Durch einen Standardsatz von Stileigenschaften kann jede Komponente gestaltet werden.
Zentrale Begriffe und Funktionsweise
| Vorgabe | Beschreibung |
|---|---|
Style |
Eine Schnittstelle, die das Aussehen eines UI-Elements mit einer Reihe von standardmäßigen formatierbaren Eigenschaften definiert. Sie ähneln CSS-Stilen und können lokal oder über ein Theme angepasst werden. Stile überschreiben sich gegenseitig. Wenn Sie eine Eigenschaft zweimal festlegen (z. B. background()), wird nur ein endgültiger Wert verwendet. |
StyleScope |
Ein Empfängerbereich für die Funktion applyStyle() in einem Stil. Sie bietet Funktionen zum Definieren visueller Eigenschaften (Abstand, Hintergrund, Rahmen usw.) und zum Zugriff auf die aktuelle StyleState. |
StyleState |
Bietet Status (z.B. isEnabled, isPressed, isChecked, benutzerdefinierte Status), die Sie in einem Stil verwenden können, um bedingte Formatierung zu definieren. |
Erste Schritte: Abhängigkeiten hinzufügen
Wenn Sie die APIs in Ihrem eigenen Projekt verwenden möchten, müssen Sie die aktuelle Alpha-Version von Jetpack Compose Foundation verwenden. Fügen Sie in der Datei settings.gradle.kts das Snapshot-Maven-Repository der Liste der zu verwendenden Repositories hinzu.
Legen Sie entweder in Ihrer libs.versions.toml-Datei oder direkt in Ihrer app/build.gradle.kts-Datei die Version von Compose auf 1.11.0-alpha06 fest:
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" }