Jetpack Compose Basics - Ako používať Backdrop Scaffold composable

Anatómia pozadia, ako je uvedené v Material Design guidelines

Nezabudnite si pozrieť predchádzajúce články zo série Jetpack compose basics. Už sme sa zaoberali Scaffoldom, Snackbarom, Showing Image a Text Input.

‍

BackdropScaffold

BackdropScaffold, ako obvykle v Jetpack Compose, má veľa parametrov na prispôsobenie a tri z nich sú povinné:

appBar - app bar pre zadnú vrstvu. App bar je plne viditeľná iba vtedy, ak je peekHeight presne rovnaká ako výška appbar. Môžete tu ponechať prázdnu lambda pre žiadny app bar alebo použiť odporúčaný TopAppBar alebo poskytnúť vlastný
composablebackLayerContent – obsah zadnej vrstvy
frontLayerContent – obsah prednej vrstvy

Ďalšie parametre sú voliteľné:

modifier - používa sa na zmeny z caller side
scaffoldState - používa sa na kontrolu stavu backdropu. Prostredníctvom tohto stavu môžete nastaviť animáciu odkrývania pozadia alebo BackdropValue of backdrop. Môže byť skrytá (zadná vrstva je skrytá) alebo odkrytá (zobrazuje sa zadná vrstva)
gesturesEnabled - či je možné s pozadím interagovať gestom
peekHeight - výška viditeľnej časti zadnej vrstvy, keď je skrytá
headerHeight - minimálna výška prednej vrstvy, keď je inactive
persistentAppBar – ak sa má panel aplikácie zobraziť, keď je zadná vrstva odhalená
stickyFrontLayer – ak sa má predná vrstva držať vo výške zadnej vrstvy
backLayerBackgroundColor – farba pozadia zadnej vrstvy
backLayerContentColor – farba obsahu zadnej vrstvy
frontLayerShape – tvar prednej vrstvy
frontLayerElevation – výška prednej vrstvy na pozadí
frontLayerContentColor - farba obsahu prednej vrstvy
frontLayerScrimColor - farba plátna aplikovaného na prednú vrstvu v neaktívnom stave. Dá sa použiť priehľadná farbasnackbarHost - obal na snackbar
frontLayerBackgroundColor - farba pozadia prednej vrstvy
frontLayerContentColor - farba obsahu prednej vrstvy
frontLayerScrimColor - farba plátna aplikovaného na prednú vrstvu v neaktívnom stave. Je možné použiť priehľadnú farbu
snackbarHost - snackbar wrapper

Väčšina z nich je ľahko pochopiteľná, niektoré sú o niečo ťažšie. Príklady budú demonštrované na BackdropScaffold vyzerajúcom takto. Aplikácia má appBar s navigačnou šípkou a názvom. Zadná vrstva s 2 textovými poľami a predná vrstva so zoznamom mačiek.

peekHeight

Výška viditeľnej časti zadnej vrstvy, keď je skrytá. V tomto príklade je peekHeight nastavená na 100dp, jednoduchšie povedané, keď je zadná vrstva skrytá, bude viditeľných 100dp.

peekHeight = 100.dp

stickyFrontLayer

Ak by sa predná vrstva mala prilepiť na výšku zadnej vrstvy. Predvolená hodnota je true, takže horná časť prednej vrstvy je prilepená k spodnej časti zadnej vrstvy. Keď je nastavené false a headerHeight je ponechaná s predvolenou hodnotou (56dp), potom bude viditeľných iba 56dp prednej vrstvy. V príklade headerHeight nie je upravený a stickyFrontLayer je nastavený na false.

‍

stickyFrontLayer = false

Odhalená zadná vrstva so sitckyFrontLayer false

headerHeight

Minimálna výška prednej vrstvy, keď je neaktívna. V tomto príklade je headerHeight nastavená na 100dp. stickyFrontLayer je potrebné nastaviť na hodnotu false, ak chceme takú malú výšku prednej vrstvy, inak sa predná vrstva prilepí na výšku zadnej vrstvy.

headerHeight = 100.dp,
stickyFrontLayer = false

Odhalená zadná vrstva s headerHeight 100dp a stickyFrontLayer false

persistentAppBar

Ak by sa pri odhalení zadnej vrstvy mala zobraziť lišta aplikácií. V tomto príklade je odhalený počiatočný stav zadnej vrstvy a panel nástrojov nie je viditeľný. Pomocou gesta sa stav zmení na skrytý, ktorý zobrazuje panel aplikácií.

persistentAppBar = false

Prechod medzi odhaleným a skrytým stavom pozadia, zobrazenie a skrytie lišty aplikácií

Default look of BackdropScaffold

Toto je príklad pozadia bez akýchkoľvek úprav. Počnúc odhaleným stavom zadnej vrstvy s pretrvávajúcou lištou aplikácií a prednou vrstvou priliehajúcou k zadnej vrstve.

‍

Jetpack Compose Basics - Ako používať Backdrop Scaffold composable