Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Você pode mostrar parcialmente uma folha de baixo e permitir que o usuário a coloque em tela cheia ou a dispense.
Para fazer isso, transmita seu 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:
@ComposablefunPartialBottomSheet(){varshowBottomSheetbyremember{mutableStateOf(false)}valsheetState=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))}}}}
showBottomSheet controla se o app mostra a caixa de diálogo na parte de baixo.
sheetState é uma instância de SheetState em que skipPartiallyExpanded é "false".
O ModalBottomSheet usa um modificador que garante o preenchimento da tela quando totalmente expandido.
ModalBottomSheet usa sheetState como valor do parâmetro sheetState.
Como resultado, a planilha só é exibida parcialmente quando aberta pela primeira vez. Em seguida, o usuário pode arrastar ou deslizar para colocar em tela cheia ou dispensar.
A lambda onDismissRequest controla o que acontece quando o usuário tenta
dispensar a caixa de diálogo na parte de baixo. Nesse caso, ela só remove a página.
Resultados
Quando o usuário pressiona o botão pela primeira vez, a página aparece parcialmente:
Figura 1. Página inferior parcialmente exibida.
Se o usuário deslizar para cima na página, ela vai preencher a tela:
O conteúdo e os exemplos de código nesta página estão sujeitos às licenças descritas na Licença de conteúdo. Java e OpenJDK são marcas registradas da Oracle e/ou suas afiliadas.
Última atualização 2025-08-31 UTC.
[null,null,["Última atualização 2025-08-31 UTC."],[],[],null,["You can partially show a [bottom sheet](/develop/ui/compose/components/bottom-sheets) and then let the user either make it\nfull screen or dismiss it.\n\nTo do so, pass your [`ModalBottomSheet`](/reference/kotlin/androidx/compose/material3/package-summary#ModalBottomSheet(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.SheetState,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,kotlin.Function0,kotlin.Function0,androidx.compose.material3.ModalBottomSheetProperties,kotlin.Function1)) an instance of [`SheetState`](/reference/kotlin/androidx/compose/material3/SheetState)\nwith `skipPartiallyExpanded` set to `false`.\n| **Note:** `ModalBottomSheet` is experimental. File any issues on the [issue\n| tracker](https://issuetracker.google.com/issues/new?component=856989&template=1425922).\n\nExample\n\nThis example demonstrates how you can use the `sheetState` property of\n`ModalBottomSheet` to display the sheet only partially at first:\n\n\n```kotlin\n@Composable\nfun PartialBottomSheet() {\n var showBottomSheet by remember { mutableStateOf(false) }\n val sheetState = rememberModalBottomSheetState(\n skipPartiallyExpanded = false,\n )\n\n Column(\n modifier = Modifier.fillMaxWidth(),\n horizontalAlignment = Alignment.CenterHorizontally,\n ) {\n Button(\n onClick = { showBottomSheet = true }\n ) {\n Text(\"Display partial bottom sheet\")\n }\n\n if (showBottomSheet) {\n ModalBottomSheet(\n modifier = Modifier.fillMaxHeight(),\n sheetState = sheetState,\n onDismissRequest = { showBottomSheet = false }\n ) {\n Text(\n \"Swipe up to open sheet. Swipe down to dismiss.\",\n modifier = Modifier.padding(16.dp)\n )\n }\n }\n }\n}https://github.com/android/snippets/blob/e4396f6dd13aaa8099c4baa671cdd549a10f201c/compose/snippets/src/main/java/com/example/compose/snippets/components/BottomSheet.kt#L41-L71\n```\n\n\u003cbr /\u003e\n\nKey points about the code\n\nIn this example, note the following:\n\n- `showBottomSheet` controls whether the app displays the bottom sheet.\n- `sheetState` is an instance of [`SheetState`](/reference/kotlin/androidx/compose/material3/SheetState) where `skipPartiallyExpanded` is false.\n- [`ModalBottomSheet`](/reference/kotlin/androidx/compose/material3/package-summary#ModalBottomSheet(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.SheetState,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,kotlin.Function0,kotlin.Function0,androidx.compose.material3.ModalBottomSheetProperties,kotlin.Function1)) takes a modifier that ensures it fills the screen when fully expanded.\n- `ModalBottomSheet` takes `sheetState` as the value for its `sheetState` parameter.\n - As a result, the sheet only partially displays when first opened. The user can then drag or swipe it to make it full screen or dismiss it.\n- The `onDismissRequest` lambda controls what happens when the user tries to dismiss the bottom sheet. In this case, it only removes the sheet.\n\nResults\n\nWhen the user first presses the button, the sheet displays partially:\n**Figure 1.** Partially displayed bottom sheet.\n\nIf the user swipes up on the sheet, it fills the screen:\n**Figure 2.** Full-screen bottom sheet. **Note:** If you set `skipPartiallyExpanded` to true, the sheet opens immediately to full screen.\n\nAdditional resources\n\n- [Bottom sheets](/develop/ui/compose/components/bottom-sheets)"]]