Sheet bawah sebagian

Anda dapat menampilkan sheet bawah sebagian, lalu mengizinkan pengguna untuk membuatnya menjadi layar penuh atau menutupnya.

Untuk melakukannya, teruskan ModalBottomSheet instance SheetState dengan skipPartiallyExpanded yang ditetapkan ke false.

Contoh

Contoh ini menunjukkan cara menggunakan properti sheetState dari ModalBottomSheet untuk menampilkan sheet hanya sebagian pada awalnya:

@Composable
fun PartialBottomSheet() {
    var showBottomSheet by remember { mutableStateOf(false) }
    val sheetState = rememberModalBottomSheetState(
        skipPartiallyExpanded = false,
    )

    Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Button(
            onClick = { showBottomSheet = true }
        ) {
            Text("Display partial bottom sheet")
        }

        if (showBottomSheet) {
            ModalBottomSheet(
                modifier = Modifier.fillMaxHeight(),
                sheetState = sheetState,
                onDismissRequest = { showBottomSheet = false }
            ) {
                Text(
                    "Swipe up to open sheet. Swipe down to dismiss.",
                    modifier = Modifier.padding(16.dp)
                )
            }
        }
    }
}
BottomSheet.kt

Poin penting tentang kode

Dalam contoh ini, perhatikan hal berikut:

• showBottomSheet mengontrol apakah aplikasi menampilkan sheet bawah.
• sheetState adalah instance SheetState dengan skipPartiallyExpanded adalah salah (false).
• ModalBottomSheet menggunakan pengubah yang memastikan pengisian layar saat diluaskan sepenuhnya.
• ModalBottomSheet menggunakan sheetState sebagai nilai untuk parameter sheetState-nya.
  • Akibatnya, spreadsheet hanya ditampilkan sebagian saat pertama kali dibuka. Pengguna kemudian dapat menarik atau menggesernya untuk menjadikannya layar penuh atau menutupnya.
• Lambda onDismissRequest mengontrol apa yang terjadi saat pengguna mencoba menutup sheet bawah. Dalam hal ini, tindakan tersebut hanya menghapus sheet.

Hasil

Saat pengguna pertama kali menekan tombol, sheet akan ditampilkan sebagian:

Jika pengguna menggeser ke atas pada sheet, sheet akan mengisi layar:

Referensi lainnya

• Sheet bawah