Częściowa plansza dolna

Możesz częściowo wyświetlić skrzynkę u dołu, a następnie pozwolić użytkownikowi otworzyć ją na cały ekran lub ją zamknąć.

Aby to zrobić, prześlij do ModalBottomSheet instancję SheetStatez wartością false dla skipPartiallyExpanded.

Przykład

Ten przykład pokazuje, jak za pomocą właściwości sheetState obiektu ModalBottomSheet możesz wyświetlić arkusz 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 ma wyświetlać dolny panel.
  • sheetState jest wystąpieniem klasy SheetState, w której skipPartiallyExpanded ma wartość false.
  • ModalBottomSheet przyjmuje modyfikator, który zapewnia, że wypełnia ekran, gdy jest w pełni rozwinięty.
  • Funkcja ModalBottomSheet przyjmuje wartość sheetState jako wartość parametru sheetState.
    • W efekcie arkusz jest widoczny tylko częściowo po pierwszym otwarciu. Użytkownik może przeciągnąć lub przesunąć element, aby wyświetlić go na pełnym ekranie lub zamknąć.
  • Lambda onDismissRequest określa, co się stanie, gdy użytkownik spróbuje zamknąć wysuwaną kartę. W tym przypadku spowoduje to tylko usunięcie arkusza.

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ąć reklamę, aby wypełniła cały ekran, lub ją zamknąć.
Rysunek 1. częściowo wyświetlona plansza dolna.

Jeśli użytkownik przesunie kartę w górę, wypełni ona cały ekran:

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

Dodatkowe materiały