Sheet bawah

Contoh sheet bawah modal Desain Material 3.

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

Mengontrol status sheet secara terprogram

Untuk meluaskan dan menciutkan sheet secara terprogram, gunakan SheetState. Anda dapat menggunakan rememberModalBottomSheetState 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 Anda dapat memanggilnya sebagai respons terhadap peristiwa UI. Pastikan untuk menghapus ModalBottomSheet dari komposisi saat 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

Sheet bawah modal di Jetpack Compose yang menampilkan konten.