Style w komponowaniu

Style API to nowy paradygmat dostosowywania lub „stylizowania” elementów i komponentów w Jetpack Compose, co tradycyjnie odbywało się za pomocą modyfikatorów. Została zaprojektowana tak, aby umożliwić 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 komponentów niestandardowych, interfejs Styles API ma wiele zalet dla Twojego systemu projektowania.

Ważne jest to, że style nie zastępują modyfikatorów, ale zastępują parametry stylów, takie jak dopełnienie i kolory. Zalecamy przejście na style zamiast parametrów, aby zwiększyć elastyczność i wydajność.

Zalety stylów

  • Uproszczenie stylizacji opartej 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 idealną charakterystyką wydajności, co pozwala uniknąć rekompozycji, które występują w przypadku obecnego podejścia animateColorAsState.
  • Uproszczenie interfejsów API komponentów: wprowadzenie jednego parametru stylu na potrzeby dostosowywania znacznie upraszcza interfejsy API komponentów i zapewnia większą elastyczność.
  • Mniej rekompozycji, co prowadzi do lepszej wydajności w porównaniu z modyfikatorami: style są uruchamiane w fazach rysowania i układu w Compose, pomijając fazę kompozycji.
  • Bardziej ustandaryzowany zestaw interfejsów API: standardowy zestaw właściwości stylistycznych umożliwia stylizowanie dowolnego komponentu.

Podstawowe pojęcia

Pomysł Opis
Style Interfejs, który definiuje wygląd elementu interfejsu użytkownika, ze standardowym zestawem właściwości, które można stylizować. Jest on podobny do stylów CSS i można go dostosować lokalnie lub za pomocą motywu. Style zastępują się nawzajem.Dwukrotne ustawienie właściwości (np. background()) daje jedną, ostateczną wartość.
StyleScope Zakres odbiornika funkcji applyStyle() w stylu. Udostępnia funkcje do definiowania właściwości wizualnych (dopełnienie, tło, obramowanie itp.) i uzyskiwania dostępu do bieżącego elementu StyleState.
StyleState Udostępnia stan (np. isEnabled, isPressed, isChecked, stany niestandardowe), którego możesz użyć w stylu, aby zdefiniować styl warunkowy.

Pierwsze kroki: dodawanie zależności

Aby używać interfejsów API we własnym projekcie, upewnij się, że używasz najnowszej wersji alfa Jetpack Compose Foundation. W pliku settings.gradle.kts dodaj repozytorium Maven Snapshot 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.12.0-alpha03:

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" }
Dalej
Podstawy stylów