Você pode mostrar parcialmente uma página inferior e permitir que o usuário a crie ou dispensar a tela cheia.
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
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 estiverem totalmente expandidas.ModalBottomSheet
usasheetState
como o valor para asheetState
.- Como resultado, a página é exibida apenas parcialmente na primeira vez que é aberta. O o usuário poderá arrastar ou deslizar o vídeo para colocá-lo em tela cheia ou dispensá-lo.
- 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:
Se o usuário deslizar para cima na página, ela preencherá a tela: