Częściowa plansza dolna

Możesz częściowo wyświetlić skrzynkę do zadań, a następnie pozwolić użytkownikowi otworzyć ją na pełny 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 wyświetla się tylko częściowo po pierwszym otwarciu. Użytkownik może przeciągnąć lub przesunąć obraz, aby wyświetlić go na pełnym ekranie lub zamknąć.
• Lambda onDismissRequest określa, co się dzieje, gdy użytkownik próbuje zamknąć dolny panel. 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:

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

Dodatkowe materiały

• Bottom sheets