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