Stile in „Schreiben“

Die Style API ist ein neues Paradigma zum Anpassen oder „Stylen“ von Elementen und Komponenten in Jetpack Compose, was bisher über Modifikatoren erfolgte. Sie bietet umfassendere und einfachere Anpassungsmöglichkeiten.

Die Styles API bietet mehr Flexibilität bei verschiedenen 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 ist, dass Stile kein Ersatz für Modifikatoren sind, aber als Ersatz für Stilparameter wie Abstände und Farben dienen. Wir empfehlen, für mehr Flexibilität und Leistung von Parametern auf Stile umzusteigen.

Vorteile von Stilen

  • Vereinfacht das zustandsbasierte Styling: Die API bietet eine prägnantere und deklarativere Möglichkeit, Stile zu definieren, die sich je nach Zustand ändern (z. B. beim Bewegen des Mauszeigers, beim Fokussieren, beim Drücken). Dadurch wird der Boilerplate-Code im Vergleich zum Modifikatorsystem erheblich reduziert.
  • Verbessert animierte Zustandsübergänge:Die Style API ermöglicht die integrierte Animation von Stileigenschaften zwischen Zuständen mit idealen Leistungsmerkmalen. So werden Neuzusammensetzungen vermieden, die beim aktuellen animateColorAsState-Ansatz auftreten.
  • Optimiert 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 Neuzusammensetzungen, was zu einer besseren Leistung im Vergleich zu Modifikatoren führt:Stile werden in den Phasen „Draw“ und „Layout“ von Compose ausgeführt, wobei die Phase „Composition“ übersprungen wird.
  • Standardisiertere APIs:Mit einem Standardsatz von Stileigenschaften können alle Komponenten gestaltet werden.

Wichtige Konzepte

Vorgabe Beschreibung
Style Eine Schnittstelle, die das Erscheinungsbild eines UI-Elements mit einer Reihe von standardmäßigen, anpassbaren Eigenschaften definiert. Es ähnelt CSS-Stilen und kann lokal oder über ein Design angepasst werden. Stile überschreiben einander. Wenn Sie eine Property zweimal festlegen (z. B. background()), wird ein einzelner, endgültiger Wert verwendet.
StyleScope Ein Empfängerbereich für die Funktion applyStyle() innerhalb eines Stils. Sie bietet Funktionen zum Definieren visueller Eigenschaften (Abstand, Hintergrund, Rahmen usw.) und zum Zugriff auf das aktuelle StyleState.
StyleState Stellt den Status (z.B. isEnabled, isPressed, isChecked, benutzerdefinierte Status) bereit, den Sie in einem Stil verwenden können, um bedingte Designs zu definieren.

Erste Schritte: Abhängigkeiten hinzufügen

Wenn Sie die APIs in Ihrem eigenen Projekt verwenden möchten, müssen Sie die neueste Alphaversion 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.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