Você pode mostrar parcialmente uma página inferior e permitir que o usuário a abra em tela cheia ou a dispense.
Para fazer isso, transmita ao ModalBottomSheet
uma instância de SheetState
com skipPartiallyExpanded
definido como false
.
Exemplo
Este exemplo demonstra como usar a propriedade sheetState
de
ModalBottomSheet
para mostrar a página apenas parcialmente no início:
@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) ) } } } }
Pontos principais sobre o código
Neste exemplo, observe o seguinte:
- O
showBottomSheet
controla se o app mostra a página inferior. sheetState
é uma instância deSheetState
, em queskipPartiallyExpanded
é falso.ModalBottomSheet
usa um modificador que garante que ele preencha a tela quando totalmente expandido.ModalBottomSheet
usasheetState
como o valor do parâmetrosheetState
.- Como resultado, a página é exibida apenas parcialmente na primeira vez que é aberta. O usuário pode arrastar ou deslizar a tela para ativar a tela cheia ou dispensar a tela.
- A lambda
onDismissRequest
controla o que acontece quando o usuário tenta dispensar a página inferior. Nesse caso, ele só remove a folha.
Resultados
Quando o usuário pressiona o botão pela primeira vez, a página é mostrada parcialmente:
![Uma página inferior que inicialmente preenche apenas parte da tela. O usuário pode deslizar para preencher a tela com esse elemento ou dispensá-lo](https://developer.android.google.cn/static/develop/ui/compose/images/components/bottom-sheet-partial.png?hl=pt-br)
Se o usuário deslizar para cima na página, ela preencherá a tela:
![Uma página inferior que o usuário expandiu para preencher a tela.](https://developer.android.google.cn/static/develop/ui/compose/images/components/bottom-sheet-fullscreen.png?hl=pt-br)