Jetpack Compose Basics - Hľadáš alternatívu k menu alebo dialógom? Skús Modal Bottom Sheet

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.

Ako vytvoriť Bottom Sheet v Jetpack Compose?

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

val sheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)

Ako je obvyklé ModalBottomSheet v Jetpack Compose má veľa parametrov na prispôsobenie, dva z nich sú povinné.

fun ModalBottomSheetLayout( sheetContent: @Composable ColumnScope.() -> Unit, modifier: Modifier = Modifier, sheetState: ModalBottomSheetState = rememberModalBottomSheetState(Hidden), sheetShape: Shape = MaterialTheme.shapes.large, sheetElevation: Dp = ModalBottomSheetDefaults.Elevation, sheetBackgroundColor: Color = MaterialTheme.colors.surface, sheetContentColor: Color = contentColorFor(sheetBackgroundColor), scrimColor: Color = ModalBottomSheetDefaults.scrimColor, content: @Composable () -> Unit )

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

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.

val sheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden) Button( onClick = { scope.launch { // Important part sheetState.show() } }, content = { ... } )

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.

val sheetState = rememberModalBottomSheetState( initialValue = ModalBottomSheetValue.Hidden, confirmStateChange = { it != ModalBottomSheetValue.HalfExpanded } )

Ď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!
• Nauč sa používať Snackbar správne
• 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
• Ako používať a vytvoriť vlastný CompositionLocal