Sheet bawah

Jika ingin mengimplementasikan sheet bawah, Anda dapat menggunakan composable ModalBottomSheet.

Anda dapat menggunakan slot content, yang menggunakan ColumnScope untuk membuat tata letak composable konten sheet dalam kolom:

ModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) {
    // Sheet content
}
MaterialLayoutSnippets.kt

Meluaskan dan menciutkan sheet secara terprogram dilakukan menggunakan SheetState. Anda dapat menggunakan rememberSheetState untuk membuat instance SheetState yang harus diteruskan ke ModalBottomSheet dengan parameter sheetState. SheetState memberikan akses ke fungsi show dan hide, serta properti yang terkait dengan status sheet saat ini. Fungsi penangguhan ini memerlukan CoroutineScope — misalnya, menggunakan rememberCoroutineScope — dan dapat dipanggil sebagai respons terhadap peristiwa UI. Pastikan untuk menghapus ModalBottomSheet dari komposisi setelah menyembunyikan sheet bawah.

val sheetState = rememberModalBottomSheetState()
val scope = rememberCoroutineScope()
var showBottomSheet by remember { mutableStateOf(false) }
Scaffold(
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show bottom sheet") },
            icon = { Icon(Icons.Filled.Add, contentDescription = "") },
            onClick = {
                showBottomSheet = true
            }
        )
    }
) { contentPadding ->
    // Screen content

    if (showBottomSheet) {
        ModalBottomSheet(
            onDismissRequest = {
                showBottomSheet = false
            },
            sheetState = sheetState
        ) {
            // Sheet content
            Button(onClick = {
                scope.launch { sheetState.hide() }.invokeOnCompletion {
                    if (!sheetState.isVisible) {
                        showBottomSheet = false
                    }
                }
            }) {
                Text("Hide bottom sheet")
            }
        }
    }
}
MaterialLayoutSnippets.kt