Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Para facilitar el uso, muchos de los elementos componibles integrados de Material 3 (androidx.compose.material3) controlan las inserciones por su cuenta, según cómo se colocan los elementos componibles en tu app de acuerdo con las especificaciones de Material.
Elementos componibles de control de inserciones
A continuación, se incluye una lista de los componentes de Material que controlan automáticamente las inserciones.
NavigationBar : Aplica las inserciones inferior y horizontal.
NavigationRail: Aplica las inserciones vertical y start.
Scaffold
De forma predeterminada, Scaffold proporciona inserciones como parámetro paddingValues para que las consumas y uses.
Scaffold no aplica las inserciones al contenido; esta responsabilidad es tuya.
Por ejemplo, para consumir estas inserciones con un LazyColumn dentro de un Scaffold, haz lo siguiente:
Scaffold{innerPadding->
// innerPadding contains inset information for you to use and applyLazyColumn(// consume insets as scaffold doesn't do it by defaultmodifier=Modifier.consumeWindowInsets(innerPadding),contentPadding=innerPadding){// ..}}
En el siguiente video, se muestra un LazyColumn dentro de un Scaffold con la pantalla de borde a borde inhabilitada y habilitada:
Cómo anular las inserciones predeterminadas
Puedes cambiar el parámetro windowInsets que se pasa al elemento componible para configurar su comportamiento. Este parámetro puede ser un tipo diferente de inserción de ventana para aplicar en su lugar, o bien se puede inhabilitar pasando una instancia vacía: WindowInsets(0, 0, 0, 0).
Por ejemplo, para inhabilitar el control de inserciones en LargeTopAppBar, establece el parámetro windowInsets en una instancia vacía:
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-24 (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-24 (UTC)"],[],[],null,["# Use Material 3 insets\n\nFor ease of use, many of the built-in Material 3 composables\n([`androidx.compose.material3`](/reference/kotlin/androidx/compose/material3/package-summary))\nhandle insets themselves, based on how the composables are placed in your app\naccording to the Material specifications.\n| **Note:** Material 2 Components ([`androidx.compose.material`](/reference/kotlin/androidx/compose/material/package-summary)) don't automatically handle insets themselves. However, you can get access to the insets and apply them manually. In [`androidx.compose.material 1.6.0`](/jetpack/androidx/releases/compose-material#1.6.0-alpha03) and later use the `windowInsets` parameter to apply the insets manually for [`BottomAppBar`](/reference/kotlin/androidx/compose/material/package-summary#BottomAppBar(androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1)), [`TopAppBar`](/reference/kotlin/androidx/compose/material/package-summary#TopAppBar(androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1)), [`BottomNavigation`](/reference/kotlin/androidx/compose/material/package-summary#BottomNavigation(androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,kotlin.Function1)), and [`NavigationRail`](/reference/kotlin/androidx/compose/material/package-summary#NavigationRail(androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,kotlin.Function1,kotlin.Function1)). Likewise, use the `contentWindowInsets` parameter for [`Scaffold`](/reference/kotlin/androidx/compose/material/package-summary#Scaffold(androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,androidx.compose.material.ScaffoldState,kotlin.Function0,kotlin.Function0,kotlin.Function1,kotlin.Function0,androidx.compose.material.FabPosition,kotlin.Boolean,kotlin.Function1,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)). Otherwise, apply the insets manually as padding.\n\nInset handling composables\n--------------------------\n\nThe following is a list of the [Material\nComponents](/reference/kotlin/androidx/compose/material3/package-summary) that\nautomatically handle insets.\n\nApp bars\n--------\n\n- [`TopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#TopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)) / [`SmallTopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#SmallTopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)) / [`CenterAlignedTopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#CenterAlignedTopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)) / [`MediumTopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#MediumTopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)) / [`LargeTopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#LargeTopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)): Applies the *top* and *horizontal* sides of the system bars as padding since it is used at the top of the window.\n- [`BottomAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#BottomAppBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)): Applies the *bottom* and *horizontal* sides of the system bars as padding.\n\n### Content containers\n\n- [`ModalDrawerSheet`](/reference/kotlin/androidx/compose/material3/package-summary#ModalDrawerSheet(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)) / [`DismissibleDrawerSheet`](/reference/kotlin/androidx/compose/material3/package-summary#DismissibleDrawerSheet(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)) / [`PermanentDrawerSheet`](/reference/kotlin/androidx/compose/material3/package-summary#PermanentDrawerSheet(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)) (content inside a modal navigation drawer): Applies *vertical* and *start* insets to content.\n- [`ModalBottomSheet`](/reference/kotlin/androidx/compose/material3/package-summary#ModalBottomSheet(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.SheetState,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.Function1)): Applies the *bottom* insets.\n- [`NavigationBar`](/reference/kotlin/androidx/compose/material3/package-summary#NavigationBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)) : Applies the *bottom* and *horizontal* insets.\n- [`NavigationRail`](/reference/kotlin/androidx/compose/material3/package-summary#NavigationRail(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)): Applies the *vertical* and *start* insets.\n\n### Scaffold\n\nBy default,\n[`Scaffold`](/reference/kotlin/androidx/compose/material3/package-summary#Scaffold(androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.material3.FabPosition,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1))\nprovides insets as parameter `paddingValues` for you to consume and use.\n`Scaffold` does not apply the insets to content; this responsibility is yours.\nFor example, to consume these insets with a `LazyColumn` inside a `Scaffold`:\n\n\n```kotlin\nScaffold { innerPadding -\u003e\n // innerPadding contains inset information for you to use and apply\n LazyColumn(\n // consume insets as scaffold doesn't do it by default\n modifier = Modifier.consumeWindowInsets(innerPadding),\n contentPadding = innerPadding\n ) {\n // ..\n }\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/layouts/InsetsSnippets.kt#L124-L133\n```\n\n\u003cbr /\u003e\n\nThe following video shows a `LazyColumn` within a `Scaffold` with edge-to-edge\ndisplay disabled and enabled:\nAlas, your browser doesn't support HTML5 video. That's OK! You can still [download the video](/static/develop/ui/compose/images/layouts/insets/LazyColumn_E2E.mp4) and watch it with a video player.\n\nOverride default insets\n-----------------------\n\nYou can change the `windowInsets` parameter passed to the composable to\nconfigure the composable's behavior. This parameter can be a different type of\nwindow inset to apply instead, or disabled by passing an empty instance:\n`WindowInsets(0, 0, 0, 0)`.\n\nFor example, to disable the inset handling on\n[`LargeTopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#LargeTopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)),\nset the `windowInsets` parameter to an empty instance:\n\n\n```kotlin\nLargeTopAppBar(\n windowInsets = WindowInsets(0, 0, 0, 0),\n title = {\n Text(\"Hi\")\n }\n)https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/layouts/InsetsSnippets.kt#L142-L147\n```\n\n\u003cbr /\u003e"]]