Częściowa plansza dolna

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

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ć, przekaż ModalBottomSheet instancję SheetState z wartością skipPartiallyExpanded ustawioną na false.

Przykład

Ten przykład pokazuje, jak można użyć właściwości sheetState dla ModalBottomSheet, aby 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 ma modyfikator, który wypełnia ekran po pełnym rozwinięciu.
• Parametr ModalBottomSheet przyjmuje wartość sheetState jako wartość parametru sheetState .
  • W związku z tym po pierwszym otwarciu arkusz wyświetla się tylko częściowo. 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ę dzieje, gdy użytkownik próbuje zamknąć dolny panel. W takim przypadku spowoduje to tylko usunięcie arkusza.

Wyniki

Gdy użytkownik po raz pierwszy kliknie przycisk, 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