Stile in „Schreiben“

Die Style API ist ein neues Paradigma zum Anpassen oder „Gestalten“ von Elementen und Komponenten in Jetpack Compose, was bisher über Modifizierer erfolgte. Sie ermöglicht eine umfassendere und einfachere Anpassung.

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 auf die Verwendung von Stilen anstelle von Parametern umzustellen.

Vorteile von Stilen

  • Vereinfacht die zustandsbasierte Formatierung: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.
  • Komponenten-APIs werden optimiert: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ür bessere Leistung bei Modifizierern:Styles 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.

Wichtige Konzepte

Vorgabe Beschreibung
Style Eine Schnittstelle, die das Aussehen eines UI-Elements mit einem Standardsatz von formatierbaren Eigenschaften definiert. Es ähnelt CSS-Styles und kann 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 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