Sheet bawah sebagian

Anda dapat menampilkan sebagian sheet bawah, lalu mengizinkan pengguna menampilkannya dalam 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-hal berikut:

• showBottomSheet mengontrol apakah aplikasi menampilkan sheet bawah.
• sheetState adalah instance SheetState dengan skipPartiallyExpanded adalah salah.
• ModalBottomSheet menggunakan pengubah yang memastikannya mengisi layar saat diperluas sepenuhnya.
• ModalBottomSheet menggunakan sheetState sebagai nilai untuk parameter sheetState-nya.
  • Akibatnya, sheet hanya ditampilkan sebagian saat pertama kali dibuka. Kemudian, pengguna dapat menarik atau menggesernya untuk membuat layar penuh atau menutupnya.
• Lambda onDismissRequest mengontrol hal yang terjadi saat pengguna mencoba menutup sheet bawah. Dalam hal ini, metode ini hanya menghapus sheet.

Hasil

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

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

Referensi tambahan

• Sheet bawah