Usa inserciones de Material 3

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 la forma en que se colocan los elementos componibles en tu app según las especificaciones de Material.

Elementos componibles que admiten inserciones

La siguiente es 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 los rellenos inferiores.
• NavigationBar : Aplica los rellenos inferior y horizontal.
• NavigationRail: Aplica los rellenos vertical y inicio.

Scaffold

De forma predeterminada, Scaffold proporciona inserciones como parámetro paddingValues para que las consumas y uses. Scaffold no aplica los insertos al contenido; esta responsabilidad es tuya. Por ejemplo, para consumir estos 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 los rellenos predeterminados

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 inserto 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