Usa inserciones de Material 3

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.

Nota: Los componentes de Material 2 (androidx.compose.material) no controlan las inserciones por su cuenta y de forma automática. Sin embargo, puedes obtener acceso a las inserciones y aplicarlas manualmente. En androidx.compose.material 1.6.0 y versiones posteriores, usa el parámetro windowInsets para aplicar las inserciones de forma manual para BottomAppBar, TopAppBar, BottomNavigation y NavigationRail. Del mismo modo, usa el parámetro contentWindowInsets para Scaffold. De lo contrario, aplica las inserciones de forma manual como relleno.

Elementos componibles de control de inserciones

A continuación, se incluye una lista de los componentes de Material que controlan automáticamente las inserciones.

Barras de la app

• TopAppBar / SmallTopAppBar / CenterAlignedTopAppBar / MediumTopAppBar / LargeTopAppBar: Aplica los lados superior y horizontal de las barras del sistema como relleno, ya que se usa en la parte superior de la ventana.
• BottomAppBar: Aplica los lados inferior y horizontal de las barras del sistema como padding.

Contenedores de contenido

• ModalDrawerSheet / DismissibleDrawerSheet / PermanentDrawerSheet (contenido dentro de un panel lateral de navegación modal): Aplica inserciones verticales y de inicio al contenido.
• ModalBottomSheet: Aplica las inserciones inferiores.
• 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 apply
    LazyColumn(
        // consume insets as scaffold doesn't do it by default
        modifier = Modifier.consumeWindowInsets(innerPadding),
        contentPadding = innerPadding
    ) {
        // ..
    }
}
InsetsSnippets.kt

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:

LargeTopAppBar(
    windowInsets = WindowInsets(0, 0, 0, 0),
    title = {
        Text("Hi")
    }
)
InsetsSnippets.kt