Stile in „Schreiben“

@Experimental

Die Style API ist ein neues Paradigma zum Anpassen oder „Stylen“ 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.

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ühren zu einer besseren Leistung als bei Modifikatoren:Stile werden in den Draw- und Layout-Phasen von Compose ausgeführt und die Kompositionsphase wird übersprungen.
  • Standardisierte APIs:Durch einen Standardsatz von Stileigenschaften kann jede Komponente gestaltet werden.

Wichtige Konzepte

Vorgabe Beschreibung
Style Eine Schnittstelle, die das Erscheinungsbild eines UI-Elements mit einem Standardsatz von formatierbaren Eigenschaften definiert. Sie ähnelt CSS-Styles und kann lokal oder über ein Theme angepasst werden. Styles überschreiben einander. Wenn Sie eine Eigenschaft zweimal festlegen (z. B. background()), wird nur ein endgültiger Wert verwendet.
StyleScope Ein Empfängerbereich für die applyStyle()-Funktion in einem Stil. Er bietet Funktionen zum Definieren visueller Eigenschaften (Abstand, Hintergrund, Rahmen usw.) und zum Zugriff auf die aktuelle StyleState.
StyleState Stellt den Status (z.B. isEnabled, isPressed, isChecked, benutzerdefinierte Status) bereit, den 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