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