Interfejs Style API to nowy sposób dostosowywania lub „stylizowania” elementów i komponentów w Jetpack Compose, który tradycyjnie odbywał się za pomocą modyfikatorów. Został on zaprojektowany tak, aby umożliwiać głębsze i łatwiejsze dostosowywanie.
Interfejs Styles API zwiększa elastyczność w przypadku różnych formatów, zapewnia lepszą wydajność i ułatwia tworzenie niestandardowych systemów projektowania. Nawet jeśli nie potrzebujesz niestandardowych komponentów, interfejs Styles API ma wiele zalet dla Twojego systemu projektowania.
Ważne jest, aby pamiętać, że style nie zastępują modyfikatorów, ale zastępują parametry stylizacji, takie jak dopełnienie i kolory. Aby zwiększyć elastyczność i wydajność, zalecamy przejście na używanie stylów zamiast parametrów.
Zalety stylów
- Upraszcza stylizację opartą na stanie: interfejs API zapewnia bardziej zwięzły i deklaratywny sposób definiowania stylów, które zmieniają się w zależności od różnych stanów (np. najechania kursorem, zaznaczenia, naciśnięcia), co znacznie zmniejsza ilość powtarzalnego kodu w porównaniu z systemem modyfikatorów.
- Ulepsza animowane przejścia między stanami: interfejs Style API umożliwia wbudowaną animację właściwości stylu między stanami z optymalną wydajnością, unikając ponownego komponowania, które występuje w przypadku obecnego podejścia
animateColorAsState. - Usprawnia interfejsy API komponentów: dzięki wprowadzeniu pojedynczego parametru Style do dostosowywania interfejsy API komponentów są znacznie uproszczone i oferują większą elastyczność.
- Mniej ponownych komponowań, co przekłada się na lepszą wydajność w porównaniu z modyfikatorami: style działają w fazach rysowania i układu Compose, pomijając fazę kompozycji.
- Bardziej standardowy zestaw interfejsów API: standardowy zestaw właściwości stylistycznych sprawia, że każdy komponent można stylizować.
Podstawowe pojęcia
| Pomysł | Opis |
|---|---|
Style |
Interfejs, który określa wygląd elementu interfejsu z standardowym zestawem właściwości, które można stylizować. Jest podobny do stylów CSS i można go dostosować lokalnie lub za pomocą motywu. Style zastępują się nawzajem.Ustawienie właściwości 2 razy (np. background()) powoduje, że używana jest tylko ostatnia wartość. |
StyleScope |
Zakres odbiorcy funkcji applyStyle() w stylu. Umożliwia definiowanie właściwości wizualnych (dopełnienie, tło, obramowanie itp.) i dostęp do bieżącego StyleState. |
StyleState |
Określa stan (np. isEnabled, isPressed, isChecked, stany niestandardowe), którego można użyć w stylu do zdefiniowania stylizacji warunkowej. |
Pierwsze kroki: dodawanie zależności
Aby korzystać z interfejsów API we własnym projekcie, musisz używać najnowszej wersji alfa biblioteki Jetpack Compose Foundation. W pliku settings.gradle.kts dodaj repozytorium migawek Maven do listy repozytoriów, których chcesz używać.
W pliku libs.versions.toml lub bezpośrednio w pliku app/build.gradle.kts ustaw wersję Compose na 1.11.0-alpha06:
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" }