Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Puedes mostrar parcialmente una hoja inferior y, luego, permitir que el usuario la muestre en pantalla completa o la descarte.
Para ello, pasa tu ModalBottomSheet a una instancia de SheetState con skipPartiallyExpanded configurado como false.
Ejemplo
En este ejemplo, se muestra cómo puedes usar la propiedad sheetState de ModalBottomSheet para mostrar la hoja solo de forma parcial al principio:
@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 si la app muestra la hoja inferior.
sheetState es una instancia de SheetState en la que skipPartiallyExpanded es falso.
ModalBottomSheet toma un modificador que garantiza que llene la pantalla cuando se expanda por completo.
ModalBottomSheet toma sheetState como el valor de su parámetro sheetState.
Como resultado, la hoja solo se muestra parcialmente cuando se abre por primera vez. Luego, el usuario puede arrastrarla o deslizarla para que se muestre en pantalla completa o descartarla.
La lambda onDismissRequest controla lo que sucede cuando el usuario intenta descartar la hoja inferior. En este caso, solo se quita la hoja.
Resultados
Cuando el usuario presiona el botón por primera vez, la hoja se muestra parcialmente:
Figura 1: Hoja inferior que se muestra parcialmente.
Si el usuario desliza el dedo hacia arriba en la hoja, esta llena la pantalla:
Figura 2: Es una hoja inferior de pantalla completa.
El contenido y las muestras de código que aparecen en esta página están sujetas a las licencias que se describen en la Licencia de Contenido. Java y OpenJDK son marcas registradas de Oracle o sus afiliados.
Última actualización: 2025-08-31 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 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)"]]