Die Style API ist ein neues Paradigma zum Anpassen oder „Gestalten“ von Elementen und Komponenten in Jetpack Compose. Bisher wurde dies über Modifikatoren erledigt. 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.
Ein wichtiger Unterschied besteht darin, dass Stile keine Modifikatoren ersetzen, aber als Ersatz für Stilparameter wie Padding und Farben dienen. Wir empfehlen, auf die Verwendung von Stilen anstelle von Parametern umzusteigen, um die Flexibilität und Leistung zu verbessern.
Vorteile von Stilen
- Vereinfacht die zustandsbasierte Gestaltung:Die API bietet eine präzisere und deklarativere Möglichkeit, Stile zu definieren, die sich je nach Zustand ändern (z. B. „hovered“, „focused“, „pressed“). Dadurch wird im Vergleich zum Modifikatorsystem deutlich weniger Boilerplate-Code benötigt.
- Verbessert animierte Zustandsübergänge:Mit der Style API können Stil-Properties zwischen Zuständen animiert werden, ohne dass es zu Neukompositionen kommt, die beim aktuellen
animateColorAsState-Ansatz auftreten. - Vereinfacht Komponenten-APIs:Durch die Einführung eines einzelnen Stilparameters für die Anpassung werden Komponenten-APIs erheblich vereinfacht und bieten mehr Flexibilität.
- Weniger Neuzusammensetzungen führen zu einer besseren Leistung als bei Modifikatoren:Stile werden in den Phasen „Draw“ und „Layout“ von Compose ausgeführt, die Phase „Composition“ wird übersprungen.
- Standardisierterer Satz von APIs:Mit einem Standardsatz von Stil-Properties kann jede Komponente gestaltet werden.
Wichtige Konzepte
| Konzept | Beschreibung |
|---|---|
Style |
Eine Schnittstelle, die das Aussehen eines UI-Elements mit einem Standardsatz von gestaltbaren Properties definiert. Sie ähnelt CSS-Stilen und kann lokal oder über ein Design angepasst werden. Stile überschreiben sich gegenseitig. Wenn Sie eine Property zweimal festlegen (z. B. background()), wird nur ein endgültiger Wert verwendet. |
StyleScope |
Ein Empfängerbereich für die Funktion applyStyle() in einem Stil. Er bietet Funktionen zum Definieren visueller Properties (Abstand, Hintergrund, Rahmen usw.) und zum Zugriff auf den aktuellen StyleState. |
StyleState |
Bietet einen Zustand (z.B. isEnabled, isPressed, isChecked, benutzerdefinierte Zustände), den Sie in einem Stil verwenden können, um bedingte Stile zu definieren. |
Erste Schritte: Abhängigkeiten hinzufügen
Wenn Sie die APIs in Ihrem eigenen Projekt verwenden möchten, müssen Sie die neueste 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 der Datei libs.versions.toml oder direkt in der Datei app/build.gradle.kts 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" }