Sheet bawah sebagian

Anda dapat menampilkan panel bawah sebagian, lalu mengizinkan pengguna membuatnya menjadi 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)
                )
            }
        }
    }
}

Poin penting tentang kode

Dalam contoh ini, perhatikan hal berikut:

  • showBottomSheet mengontrol apakah aplikasi menampilkan panel bawah.
  • sheetState adalah instance SheetState dengan skipPartiallyExpanded bernilai salah.
  • ModalBottomSheet menggunakan pengubah yang memastikan bahwa elemen ini 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 membuatnya menjadi layar penuh atau menutupnya.
  • Lambda onDismissRequest mengontrol hal yang terjadi saat pengguna mencoba menutup panel bawah. Dalam hal ini, tindakan tersebut hanya akan menghapus sheet.

Hasil

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

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

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

Panel bawah yang telah diperluas pengguna untuk mengisi layar.
Gambar 2. Panel bawah layar penuh.

Referensi lainnya