wasey-rao/kmp-edge-to-edge

Edge-to-Edge in Compose Multiplatform

Android erzwingt Edge-to-Edge für Apps, die auf SDK 35 und höher abzielen, und die Opt-out-Möglichkeit entfällt ab SDK 36. iOS-Apps werden erwartet, unter der Statusleiste und dem Home-Indikator zu zeichnen. Bauen Sie jeden Bildschirm von Anfang an Edge-to-Edge.

Die Regel: Hintergründe zeichnen hinter den Systemleisten; Inhalte und Steuerelemente werden durch Insets gepolstert.

Aktivieren

Android (MainActivity in androidApp), vor setContent:

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

Setzen Sie im Manifest android:windowSoftInputMode="adjustResize" für die Aktivität, damit IME-Insets Compose erreichen.

iOS (ContentView.swift): Lassen Sie Compose den gesamten Bildschirm besitzen, andernfalls wendet SwiftUI zuerst die sicheren Bereiche an und Compose sieht keine Insets.

ComposeView().ignoresSafeArea()

Scaffold erledigt den Großteil der Arbeit

Scaffold(
    topBar = { TopAppBar(title = { Text(title) }) },          // polstert sich selbst für die Statusleiste
    bottomBar = { NavigationBar { /* ... */ } },              // polstert sich selbst für die Navigationsleiste
) { innerPadding ->
    LazyColumn(
        contentPadding = innerPadding,                         // Inhalt scrollt unter den Leisten
        modifier = Modifier.fillMaxSize(),
    ) { /* items */ }
}

• Verwenden Sie immer innerPadding. Übergeben Sie es bei Listen als contentPadding, damit Elemente hinter transparenten Leisten scrollen; für nicht scrollbare Inhalte verwenden Sie Modifier.padding(innerPadding).
• Material 3-Leisten verbrauchen ihre eigenen Insets. Fügen Sie keine statusBarsPadding() zusätzlich zu einer TopAppBar hinzu.
• Verschachtelte Scaffolds verdoppeln das Padding. Geben Sie dem inneren Scaffold contentWindowInsets = WindowInsets(0) oder wenden Sie consumeWindowInsets(innerPadding) auf den äußeren Inhalt an.

Bildschirme ohne Scaffold

Box(Modifier.fillMaxSize().background(MaterialTheme.colorScheme.background)) {   // Hintergrund füllt den Bildschirm
    Column(Modifier.fillMaxSize().windowInsetsPadding(WindowInsets.safeDrawing)) { /* content */ }
}

WindowInsets.safeDrawing deckt Statusleiste, Navigationsleiste, Display-Ausschnitt und Tastatur ab. Verwenden Sie safeContent, wenn Gesten wichtig sind. Wenden Sie Inset-Padding einmal an, auf der Ebene, die den Inhalt besitzt, niemals sowohl auf Eltern- als auch auf Kind-Element.

Tastatur

• Eingabebildschirme: Modifier.imePadding() auf dem scrollbaren Container, oder safeDrawing, das bereits die IME enthält.
• Ein unterer Button, der über der Tastatur bleiben muss: Platzieren Sie ihn im bottomBar-Slot des Scaffolds mit Modifier.imePadding(), oder verwenden Sie WindowInsets.ime.union(WindowInsets.navigationBars).
• Machen Sie den Inhalt scrollbar, damit ein fokussiertes Feld sichtbar wird.

Vollbild-Inhalte

Bilder, Karten, Video- und Kameravorschauen sollten Insets ignorieren und den gesamten Bildschirm füllen. Überlagern Sie Steuerelemente darauf und polstern Sie nur die Steuerelemente mit WindowInsets.safeDrawing.

Kontrast der Systemleistensymbole

Die Leisten sind transparent, daher liegt der Symbolkontrast in Ihrer Verantwortung. Auf Android wählt enableEdgeToEdge() helle oder dunkle Symbole basierend auf dem Systemtheme; wenn die App einen eigenen Theme-Wechsel hat, rufen Sie es erneut mit passenden SystemBarStyles auf, wenn sich das Theme ändert. Bei Drei-Tasten-Navigation fügt Android eine transparente Abdeckung hinzu; behalten Sie diese, es sei denn, die untere Leiste bietet bereits einen festen Hintergrund.

Werbebanner

Ein unteres Banner wird im bottomBar-Slot des Scaffolds platziert, oberhalb des Navigationsleisten-Insets, mit reservierter Höhe, damit der Inhalt nicht springt. Lassen Sie niemals ein Banner unter der Gestenleiste oder überlappend mit Navigationssteuerelementen liegen; das ist sowohl ein Layout-Fehler als auch ein Problem mit den Werberichtlinien.

Checkliste für jeden Bildschirm

• Der Hintergrund erreicht die oberen und unteren physischen Kanten.
• Kein Text oder Steuerelement unter der Statusleiste, dem Ausschnitt, der Navigationsleiste oder dem Home-Indikator.
• Das letzte Listenelement kann vollständig über die untere Leiste scrollen.
• Fokussierte Textfelder bleiben bei geöffneter Tastatur sichtbar.
• Sieht im Querformat (Ausschnitt an der Seite) und im dunklen Theme richtig aus.
• Insets werden einmal angewendet, nicht verdoppelt.

Wenn Googles edge-to-edge-Fähigkeit installiert ist, verwenden Sie diese für Android-spezifische Fehlerbehebung darüber hinaus.