Jetpack Compose Basics - Hľadáš alternatívu k menu alebo dialógom? Skús Modal Bottom Sheet
Peter Šuly
Android developer
Bottom Sheet je komponent používaný ako doplnková plocha ukotvená k spodnej časti obrazovky. Tento článok bude o presnom type Bottom Sheet - Modal Bottom Sheet a o tom, ako ho použiť v Jetpack Compose
Je to alternatíva k menu alebo dialógovým oknám, musí sa zavrieť (buď potiahnutím prstom alebo inou interakciou používateľa), aby ste mohl interagovať s obsahom obrazovky. V Jetpack Compose je bottom sheet implementovaný pomocou composable ModalBottomSheet.
ModalBottomSheet má 3 možné stavy definované prostredníctvom parametra sheetState typu ModalBottomSheetValue. Možné hodnoty sú Hidden, Expanded alebo HalfExpanded. Predvolená hodnota v stave listu je Hidden, vlastný stav si možno zapamätať takto
Ako je obvyklé ModalBottomSheet v Jetpack Compose má veľa parametrov na prispôsobenie, dva z nich sú povinné.
Povinné parametre
sheetContent - composable, obsahujúci obsah z bottom sheetu
content - composable, obsahujúci obsah obrazovky za spodným listom. Tento obsah je prekrytý scrimColor, keď je bottom sheet v stave Expanded
Voliteľné parametre
sheetState - riadi stav ModalBottomSheet
modifier - používa sa na zmeny z caller side
sidesheetShape - tvar spodného listu napr. *RoundedCornerShape*(topStart = 24.*dp*, topEnd = 24.*dp*)
sheetElevation - výška spodného listu v dpsheetBackgroundColor - farba pozadia spodného listu, predvolene nastavená na povrchovú farbu
sheetContentColor - farba obsahu kontrastujúca s farbou pozadia, predvolená hodnota vypočíta sa pomocou contentColorFor funkcie
scrimColor – farba prekrytia aplikovaná na obsah, keď je viditeľný bottom sheet
Správanie bottom sheetu
Ako otvoriť ModalBottomSheet kliknutím na tlačidlo?
Pre animovaný prechod ModalBottomSheet sú pripravené funkcie show() a hide(), ktoré možno volať na modalBottomSheetState. Ide o suspend funkciu, pretože na ich použitie je potrebná animácia spustená ako coroutine, scope alebo LaunchedEffect.
Ako zakázať stav Half Expanded v ModalBottomSheet?
V niektorých prípadoch stav HalfExpanded nie je žiaduci a našťastie existuje spôsob, ako ho zakázať vrátením hodnoty false v lambda confirmStateChange.
