Możesz częściowo wyświetlić dolną planszę, a następnie pozwolić użytkownikowi pełnego ekranu lub je 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) ) } } } }
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
ma wartość fałsz.ModalBottomSheet
ma modyfikator, który wypełnia ekran po pełnym rozwinięciu.- Parametr
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ąć.
- Lambda funkcji
onDismissRequest
określa, co się dzieje, gdy użytkownik próbuje wykonać zamknij 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:
Jeśli użytkownik przesunie palcem w górę po arkuszu, wypełni on ekran:
.