Sheet bawah sebagian

Anda dapat menampilkan sheet bawah sebagian, lalu mengizinkan pengguna menjadikannya layar penuh atau menutupnya.

Untuk melakukannya, teruskan ModalBottomSheet instance SheetState dengan skipPartiallyExpanded 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-poin penting tentang kode

Dalam contoh ini, perhatikan hal berikut:

  • showBottomSheet mengontrol apakah aplikasi menampilkan sheet bawah.
  • sheetState adalah instance SheetState dengan skipPartiallyExpanded bernilai 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. Pengguna kemudian dapat menarik atau menggesernya untuk menjadikannya layar penuh atau menutupnya.
  • Lambda onDismissRequest mengontrol hal yang terjadi saat pengguna mencoba menutup sheet bawah. Dalam hal ini, tindakan ini hanya akan menghapus sheet.

Hasil

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

Sheet bawah yang awalnya hanya mengisi sebagian layar. Pengguna dapat menggeser untuk mengisi layar dengan gambar, atau menutupnya
Gambar 1. Sheet bawah yang ditampilkan sebagian.

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

Sheet bawah yang telah diluaskan pengguna untuk mengisi layar.
Gambar 2. Sheet bawah layar penuh.

Referensi lainnya