Jetpack Compose Basics - Nauč sa používať Snackbar správne

Tento jednoduchý komponent pozostáva zo správy (1), kontajnera (2) a voliteľného akčného tlačidla (3). Správa môže mať maximálne 2 riadky.

Snackbar v Jetpack Compose

Snackbar

V Jetpack Compose je composable funkcia s názvom Snackbar. Je to len vizuálna reprezentácia snackbaru definovaného v Material design guidelines, bez možnosti zobraziť alebo skryť a bez animácií. Obvykle budete musieť použiť SnackbarHost.

Chceš používať najnovšie technológie na 🔝 projektoch? Náš Android tím hľadá parťáka!

SnackbarHost

Tento komponent je zodpovedný za zobrazovanie (alebo skrývanie snackbaru po definovanom čase) a za jeho animácie. Jednoducho povedané, SnackbarHost je wrapper Snackbaru uvedeného vyššie. Na to sú potrebné 3 parametre:

• hostState - tento parameter je uvedený nižšie
• modifikátor - používa sa na zmeny zo strany volajúceho
• snackbar - composable funkcia, ktorá získava SnackbarData, v predvolenom nastavení iba Snackbar composable. Ak ste zvedavý, SnackbarData je rozhranie pozostávajúce zo správy, štítka akcie a trvania snackbaru
• hostState - tento parameter je popísaný nižšie

SnackbarHostState

Ako naznačuje popisný názov triedy, používa sa na ovládanie stavu SnackbarHost. Ako uvádzajú Material design guidelines, súčasne by sa mal zobrazovať iba jeden snackbar, ostatné sú v poradí a neskôr ich zobrazí SnackbarHostState.

Jediným povinným parametrom SnackbarHostState je hostState, ktorý je možné získať jednoducho s konštruktorom. Potom môžete SnackbarHost jednoducho umiestniť kdekoľvek chcete. Snabar sa však stále nezobrazuje, ako to teda urobiť?
 

Ako zobraziť snackbar v Jetpack Compose?

Snackbar sa zobrazuje ako reakcia na niečo, v našom prípade „niečo" je kliknutie na tlačidlo. ShowSnackbar je suspend funkcia, takže je potrebný coroutine scope. Coroutine scope programu si musíte zapamätať mimo funkcie onClick, pretože keď sa rozsah zruší, snackbar sa odstráni z frontu.

Vlastný snackbar v Jetpack Compose

Tu je dôležité upraviť parameter SnabarbarHost. Bez našich úprav sa použije predvolený Snackbar composable. S nižšie uvedeným kódom sa použije náš dizajn snackbaru, ale predvolené správanie snackbaru sa zachová.

Ďalšie články zo série Jetpack Compose Basics:

• Vyskúšaj Scaffold a zostav niekoľko materiálových komponentov so správnym rozložením!
• Ako načítať obrázky z Bitmapy, Vectoru, Painteru alebo z URL pomocou funkcie Coil
• Ako používať text field composables pre splnenie Material design špecifikácie
• Ako používať Backdrop Scaffold composable
• Hľadáš alternatívu k menu alebo dialógom? Skús Modal Bottom Sheet
• Ako používať a vytvoriť vlastný CompositionLocal