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 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 bernilai 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, hanya sheet yang dihapus.

Hasil

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

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

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

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

Referensi lainnya