Częściowa plansza dolna

Możesz częściowo wyświetlić arkusz dolny, a potem pozwolić użytkownikowi wyświetlić go na pełnym ekranie lub zamknąć.

Aby to zrobić, przekaż do ModalBottomSheet instancję SheetState, w której skipPartiallyExpanded ma wartość false.

Przykład

Ten przykład pokazuje, jak za pomocą właściwości sheetState elementu ModalBottomSheet wyświetlić arkusz początkowo tylko częściowo:

@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

Najważniejsze informacje o kodzie

W tym przykładzie zwróć uwagę na te kwestie:

  • showBottomSheet określa, czy aplikacja wyświetla dolny arkusz.
  • sheetState jest instancją SheetState, w której skipPartiallyExpanded ma wartość false.
  • ModalBottomSheet przyjmuje modyfikator, który zapewnia wypełnienie ekranu po pełnym rozwinięciu.
  • ModalBottomSheet przyjmuje wartość sheetState dla parametru sheetState.
    • W rezultacie arkusz jest wyświetlany tylko częściowo po pierwszym otwarciu. Użytkownik może przeciągnąć lub przesunąć palcem powiadomienie, aby wyświetlić je na pełnym ekranie lub zamknąć.
  • Funkcja onDismissRequest lambda określa, co się stanie, gdy użytkownik spróbuje zamknąć arkusz u dołu ekranu. W tym przypadku usunięty zostanie tylko arkusz.

Wyniki

Gdy użytkownik naciśnie przycisk po raz pierwszy, arkusz wyświetli się częściowo:

Plansza dolna, która początkowo wypełnia tylko część ekranu. Użytkownik może przesunąć palcem, aby wypełnić ekran, lub odrzucić powiadomienie.
Rysunek 1. Częściowo wyświetlona plansza dolna.

Jeśli użytkownik przesunie palcem w górę, arkusz wypełni ekran:

Plansza dolna, którą użytkownik rozwinął na cały ekran.
Rysunek 2. arkusz u dołu ekranu na pełnym ekranie
,

Dodatkowe materiały