Możesz częściowo wyświetlić dolną planszę, a następnie zezwolić użytkownikowi na jej cały ekran lub zamknięcie.
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
właściwości ModalBottomSheet
, by początkowo 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) ) } } } }
Najważniejsze informacje o kodzie
W tym przykładzie pamiętaj o tych kwestiach:
showBottomSheet
określa, czy aplikacja ma wyświetlać planszę dolną.sheetState
to instancjaSheetState
, w którejskipPartiallyExpanded
to fałsz.ModalBottomSheet
przyjmuje modyfikator, który po pełnym rozwinięciu wypełnia ekran.ModalBottomSheet
przyjmuje wartośćsheetState
jako wartość parametrusheetState
.- W związku z tym po pierwszym otwarciu arkusz wyświetla się tylko częściowo. Użytkownik może ją przeciągnąć, aby włączyć pełny ekran, lub ją zamknąć.
- Funkcja lambda
onDismissRequest
określa, co się dzieje, gdy użytkownik próbuje zamknąć planszę dolną. W takim przypadku spowoduje to tylko usunięcie arkusza.
Wyniki
Gdy użytkownik po raz pierwszy kliknie przycisk, 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 go zamknąć.](https://developer.android.google.cn/static/develop/ui/compose/images/components/bottom-sheet-partial.png?hl=pl)
Jeśli użytkownik przesunie palcem w górę po arkuszu, wypełni on ekran:
![Plansza dolna, która użytkownik rozwinęła, aby zapełniła ekran.](https://developer.android.google.cn/static/develop/ui/compose/images/components/bottom-sheet-fullscreen.png?hl=pl)