wasey-rao/kmp-edge-to-edge

Edge-to-edge en Compose Multiplatform

Android exige edge-to-edge para aplicaciones que apuntan a SDK 35 y posteriores, y la opción de exclusión desaparece en la 36. Se espera que las aplicaciones iOS dibujen debajo de la barra de estado y el indicador de inicio. Construye cada pantalla edge-to-edge desde el principio.

La regla: los fondos se dibujan detrás de las barras del sistema; el contenido y los controles se acolchan con los insets.

Habilitarlo

Android (MainActivity en androidApp), antes de setContent:

override fun onCreate(savedInstanceState: Bundle?) {
    enableEdgeToEdge()
    super.onCreate(savedInstanceState)
    setContent { App() }
}

En el manifiesto, establece android:windowSoftInputMode="adjustResize" en la actividad para que los insets del IME lleguen a Compose.

iOS (ContentView.swift): deja que Compose sea dueño de toda la pantalla; de lo contrario, SwiftUI aplica primero las áreas seguras y Compose ve insets cero.

ComposeView().ignoresSafeArea()

Scaffold hace la mayor parte del trabajo

Scaffold(
    topBar = { TopAppBar(title = { Text(title) }) },          // se acolcha solo para la barra de estado
    bottomBar = { NavigationBar { /* ... */ } },              // se acolcha solo para la barra de navegación
) { innerPadding ->
    LazyColumn(
        contentPadding = innerPadding,                         // el contenido se desplaza debajo de las barras
        modifier = Modifier.fillMaxSize(),
    ) { /* items */ }
}

• Usa siempre innerPadding. Para listas, pásalo como contentPadding para que los elementos se desplacen detrás de las barras translúcidas; para contenido sin desplazamiento, usa Modifier.padding(innerPadding).
• Las barras de Material 3 consumen sus propios insets. No agregues statusBarsPadding() encima de un TopAppBar.
• Los Scaffolds anidados duplican el padding. Dale al interior contentWindowInsets = WindowInsets(0) o aplica consumeWindowInsets(innerPadding) en el contenido exterior.

Pantallas sin un Scaffold

Box(Modifier.fillMaxSize().background(MaterialTheme.colorScheme.background)) {   // el fondo llena la pantalla
    Column(Modifier.fillMaxSize().windowInsetsPadding(WindowInsets.safeDrawing)) { /* contenido */ }
}

WindowInsets.safeDrawing cubre la barra de estado, la barra de navegación, el recorte de pantalla y el teclado. Usa safeContent cuando los gestos importen. Aplica el padding de insets una vez, en el nivel que posee el contenido, nunca tanto en el padre como en el hijo.

Teclado

• Pantallas de entrada: Modifier.imePadding() en el contenedor desplazable, o safeDrawing que ya incluye el IME.
• Un botón inferior que debe situarse encima del teclado: ponlo en el bottomBar del scaffold con Modifier.imePadding(), o usa WindowInsets.ime.union(WindowInsets.navigationBars).
• Haz que el contenido sea desplazable para que un campo enfocado pueda aparecer en la vista.

Contenido a sangre completa

Imágenes, mapas, video y vistas previas de la cámara deben ignorar los insets y llenar la pantalla. Superpone los controles encima y acolcha solo los controles con WindowInsets.safeDrawing.

Contraste de las barras del sistema

Las barras son transparentes, por lo que el contraste de los iconos es tu responsabilidad. En Android, enableEdgeToEdge() elige iconos claros u oscuros según el tema del sistema; si la aplicación tiene su propio cambio de tema, llámalo de nuevo con SystemBarStyles que coincidan cuando el tema cambie. Con la navegación de tres botones, Android agrega un velo translúcido; mantenlo a menos que la barra inferior ya proporcione un fondo sólido.

Banners publicitarios

Un banner inferior va dentro del slot bottomBar del scaffold, encima del inset de la barra de navegación, con su altura reservada para que el contenido no salte. Nunca dejes que un banner se sitúe debajo de la barra de gestos o superponga los controles de navegación; eso es tanto un error de diseño como un problema de la política de anuncios.

Lista de verificación para cada pantalla

• El fondo llega hasta los bordes físicos superior e inferior.
• Ningún texto o control debajo de la barra de estado, recorte, barra de navegación o indicador de inicio.
• El último elemento de la lista puede desplazarse completamente por encima de la barra inferior.
• Los campos de texto enfocados permanecen visibles con el teclado abierto.
• Se ve correctamente en horizontal (recorte en el lado) y en tema oscuro.
• Los insets se aplican una vez, no duplicados.

Si la habilidad edge-to-edge de Google está instalada, úsala para solución de problemas específicos de Android más allá de esto.