Jetpack Compose Basics - Ako používať a vytvoriť vlastný CompositionLocal
Technology
2
 min read
January 13, 2022

Jetpack Compose Basics - Ako používať a vytvoriť vlastný CompositionLocal

Peter Šuly
Peter Šuly
Android developer

V dnešnej epizóde série Jetpack Compose Basics vám ukážem, ako použiť CompositionLocal na implicitné odovzdávanie údajov cez kompozíciu, vďaka čomu bude zoznam parametrov funkcie prehľadnejší.

Čo je CompositionLocal v Jetpack Compose?

Ako môžete odovzdať údaje prostredníctvom kompozície? Jedným zo spôsobov je poslať ich, ako parametre do každého composable, ale v prípade farieb alebo typografie môžu byť veci dosť chaotické, pretože ich potrebujete takmer v každom composable.

Druhou možnosťou je použiť CompositionLocal. Je to nástroj na implicitné odovzdávanie údajov kompozíciou. napr. MaterialTheme využíva CompositionLocal na poskytovanie farieb, tvarov a typografie kdekoľvek.

Ako používať CompositionLocal v Jetpack Compose?

Pozrite si príklad kódu nižšie. Farba textov sa v Text composable nemení priamo, ale používa sa provider LocalContentColor. Táto technika je široko používaná v rámci Jetpack Compose a môže byť užitočná, keď potrebujete zmeniť atribút všetkých composables položiek v scope. Aktuálna hodnota CompositionLocal zodpovedá najbližšej hodnote poskytnutej predkom v špecifikovanej časti kompozície.

Example of using LocalContentColor
Example of using LocalContentColor

Ak je vaša otázka - Ako môže Text composable vedieť, ktorú farbu alebo alfu použiť? - odpoveď je v implementácii Text composable. Farba textu sa určí pomocou  LocalContentColor.current, pokiaľ caller nešpecifikuje atribút color.

Ako vytvoriť vlastný CompositionLocal?

Po prvé, CompositionLocal skutočne dáva zmysel, najmä ak ho môže potenciálne použiť ktorýkoľvek potomok, nie niekoľko z nich. Radšej si dvakrát rozmyslite, či ho naozaj chcete vytvoriť alebo len použiť explicitné parametre. Nie je to vždy najlepšie riešenie a neodporúča sa to preháňať. Nevýhodou je, že je ťažšie zabezpečiť, aby bola splnená hodnota každého CompositionLocal, keď vznikajú implicitné závislosti.

Po druhé, v CompositionLocal by mala byť vždy nejaká hodnota, pričom pri vytváraní by mala byť poskytnutá vaša predvolená hodnota.

Existujú 2 možnosti na vytvorenie CompositionLocal

  • compositionLocalOf - zmena hodnoty znehodnotí iba obsah, ktorý číta jeho aktuálnu hodnotu
  • staticCompositionLocalOf - čítanie nesleduje Compose. Zmena hodnoty spôsobí, že sa prekomponuje celý obsah lambda, nie len miesta, kde sa číta aktuálna hodnota

Čítanie z vytvorených LocalPaddings môže vyzerať takto. Box v príklade nižšie má teraz paddings pre celú aplikáciu - PaddingValues (24.dp).

Like what you see?
Join our newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
High quality content once a month. No spam, we promise.
Your personal data is processed in accordance with our Memorandum on Personal Data Protection.

Páči sa vám náš content?
Odoberajte newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
Vaše osobné údaje sú spracované v súlade s našim Memorandom na ochranu osobných údajov.