Stile in „Schreiben“

Die Style API ist ein neues Paradigma zum Anpassen oder „Gestalten“ von Elementen und Komponenten in Jetpack Compose, was bisher über Modifikatoren erfolgte. Sie wurde entwickelt, um eine umfassendere und einfachere Anpassung zu 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 Stile umzusteigen, um mehr Flexibilität und Leistung zu erzielen.

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:Die Style API ermöglicht die integrierte Animation von Stileigenschaften zwischen Zuständen mit idealen Leistungseigenschaften. Dadurch werden Neukompositionen vermieden, die beim aktuellen animateColorAsState-Ansatz auftreten.
  • Optimiert Komponenten-APIs:Durch die Einführung eines einzelnen Stilparameters für die Anpassung werden Komponenten-APIs erheblich vereinfacht und bieten mehr Flexibilität.
  • Weniger Neukompositionen 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 Stileigenschaften kann jede Komponente gestaltet werden.

Wichtige Konzepte

Vorgabe Beschreibung
Style Eine Schnittstelle, die das Aussehen eines UI-Elements mit einem Standardsatz von gestaltbaren Eigenschaften definiert. Sie ähnelt CSS-Stilen und kann lokal oder über ein Design angepasst werden. Stile überschreiben sich gegenseitig. Wenn Sie eine Eigenschaft zweimal festlegen (z. B. background()), wird ein einzelner endgültiger Wert verwendet.
StyleScope Ein Empfängerbereich für die Funktion applyStyle() in einem Stil. Er bietet Funktionen zum Definieren visueller Eigenschaften (Padding, 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 Maven-Snapshot-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.12.0-alpha03 fest:

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" }
Weiter
Grundlagen von Stilen