Jetpack Compose Basics – Hledáte alternativu k menu nebo dialogovým oknům? Vyzkoušejte Modal Bottom Sheet

Jedná se o alternativu k menu nebo dialogovým oknům, musí se zavřít (přetažením prstem nebo jinou uživatelskou interakcí), abyste mohli interagovat s obsahem obrazovky. V Jetpack Compose je bottom sheet implementovaný pomocí composable ModalBottomSheet.

Jak vytvořit Bottom Sheet v Jetpack Compose?

ModalBottomSheet má 3 možné stavy definované prostřednictvím parametru sheetState typu ModalBottomSheetValue. Možné hodnoty jsou Hidden, Expanded nebo HalfExpanded. Předvolená hodnota stavu listu je Hidden, vlastní stav si lze zapamatovat takto

val sheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)

Jako obvykle má ModalBottomSheet v Jetpack Compose mnoho parametrů k přizpůsobení, přičemž dva z nich jsou 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é parametry

• sheetContent – composable s obsahem z bottom sheetu
• content – composable s obsahem obrazovky za spodním listem. Tento obsah je překrytý scrimColor, když je bottom sheet ve stavu Expanded.

Volitelné parametry

• sheetState – řídí stav ModalBottomSheet
• modifier – používá se pro změny z caller side
• sidesheetShape – tvar spodního listu, např. *RoundedCornerShape* (topStart = 24.*dp*, topEnd = 24.*dp*)
• sheetElevation – výška bottom sheetu v dp sheetBackgroundColor – barva pozadí spodního listu, v předvolbě nastavená na povrchovou barvu
• sheetContentColor – barva obsahu kontrastující s barvou pozadí, předvolená hodnota, vypočítá se pomocí funkce contentColorFor
• scrimColor – barva překryvu aplikovaná na obsah, když je viditelný bottom sheet

Jak otevřít ModalBottomSheet kliknutím na tlačítko?

Pro animovaný přechod ModalBottomSheet jsou k dispozici funkce show() a hide(), které je možné vyvolat na modalBottomSheetState. Jedná se o funkci suspend, protože k jejich použití je nutná animace spuštěná jako coroutine, scope nebo LaunchedEffect.

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

Jak zakázat stav Half Expanded v ModalBottomSheet?

V některých případech není stav HalfExpanded žádoucí a naštěstí existuje způsob, jak ho zakázat vrácením hodnoty false v lambda confirmStateChange.

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

Další články ze série Jetpack Compose Basics:

• Vyzkoušejte Scaffold a sestavte několik materiálových komponent se správným rozložením!
• Naučte se správně používat Snackbar
• Jak načítat obrázky z Bitmapy, Vectoru, Painteru nebo URL pomocí funkce Coil
• Jak používat text field composables v zájmu splnění specifikace Material designu
• Jak používat Backdrop Scaffold composable
• Jak používat a vytvořit vlastní CompositionLocal