Jetpack Compose in der mobilen Entwicklung: Was es ist, Schlüsselkonzepte und wie es funktioniert

Jetpack Compose Grundlagen (@Composable, Composition, Recomposition)

@Composable — Annotation, die eine Funktion in eine Composable-Funktion verwandelt. Composable-Funktionen sind UI-Bausteine. Sie geben kein View zurück, sondern geben Elemente in Composition ab. Composition — ein aus Composable-Funktionsaufrufen aufgebauter UI-Baum. Compose vergleicht den neuen mit dem alten Baum und aktualisiert nur die geänderten Teile.

Recomposition

Recomposition — Neustart von Composable-Funktionen bei Zustandsänderung. Compose verfolgt, welche Zustände in jeder Funktion gelesen werden. Wenn sich ein Zustand ändert, startet Compose nur die Funktionen neu, die diesen Zustand lesen (Smart Recomposition). Recomposition ist optimistisch: Sie kann mehrmals ausgeführt werden, daher müssen Funktionen rein sein (ohne Nebeneffekte). Nebeneffekte gehören in LaunchedEffect oder DisposableEffect. Composable-Funktionen können nicht suspend sein. Sie werden von anderen Composable-Funktionen aufgerufen. Die Aufrufreihenfolge ist nicht garantiert (Compose kann neu ordnen).

// Composable-Beispiel mit State Hoisting und LazyColumn
@Composable
fun ItemList(
    items: List<String>,
    onItemClick: (String) -> Unit
) {
    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ) {
        items(items) { item ->
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .clickable { onItemClick(item) }
                    .padding(8.dp)
            ) {
                Text(
                    text = item,
                    style = MaterialTheme.typography.bodyLarge
                )
            }
        }
    }
}

@Composable
fun MainScreen() {
    var text by remember { mutableStateOf("") }
    val items = listOf("Item 1", "Item 2", "Item 3")

    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Compose App") })
        }
    ) { padding ->
        ItemList(
            items = items,
            onItemClick = { selected -> text = selected }
        )
    }
}

Composition — deklarativer Baum. Recomposition — intelligenter Neustart. IT Sectr empfiehlt, die Typstabilität zu überwachen — instabile Typen verursachen übermäßige Neuzusammensetzung.

CompositionLocal

CompositionLocal — implizite Datenübergabe in Compose. Analog zu @Environment in SwiftUI. CompositionLocalProvider — Wert setzen. current — lesen. Verwendet für: Theme (MaterialTheme), ContentScale, Density. Statisches CompositionLocal — für Konfiguration ohne Änderungen. Dynamisches CompositionLocal — für veränderliche Werte (Themes). IT Sectr empfiehlt, CompositionLocal für globale Konfigurationen und explizite Parameter für Daten zu verwenden.

Zustand (remember, mutableStateOf, State Hoisting)

remember — bewahrt Wert zwischen Neuzusammensetzungen. mutableStateOf — erstellt beobachtbaren Zustand (MutableState<T>). Bei Änderung wird Neuzusammensetzung ausgelöst. State Hoisting — Muster: Zustand wird in die Elternkomponente angehoben, Kind erhält Wert + Callback. State (unveränderlich) — nur lesen. MutableState — lesen + schreiben. rememberSaveable — bleibt bei Drehung/Prozessende erhalten.

State Hoisting

State Hoisting — Prinzip: state down, events up. Der Zustand wird im Elternteil gespeichert und über Parameter an Kindkomponenten übergeben. Kindkomponenten melden Änderungen über Lambdas (Callback). Vorteile: Wiederverwendbarkeit, Testbarkeit, einzige Wahrheitsquelle. Beispiel: Anstatt dass MyTextField seinen eigenen Zustand speichert, speichert der Elternteil den String und übergibt ihn über value + onValueChange.

Abgeleiteter Zustand

derivedStateOf — berechneter Zustand, wird nur bei Änderung der Abhängigkeiten neu berechnet. Verwendet für Filterung, Konvertierung, Validierung. snapshotFlow — konvertiert State in Flow. Verwendet für reaktive Ketten. collectAsState — sammelt Flow in State innerhalb von Composable. IT Sectr empfiehlt derivedStateOf für berechnete Werte und snapshotFlow zum Verbinden von State mit Koroutinen.

Container (Column, Row, Box, LazyColumn)

Column — vertikales Layout (analog zu LinearLayout vertical). Row — horizontales Layout. Box — Stapellayout (analog zu FrameLayout). LazyColumn — vertikale scrollbare Liste mit verzögertem Laden. LazyRow — horizontale scrollbare Liste. Scaffold — Hauptbildschirmgerüst: TopAppBar, BottomBar, FloatingActionButton, Snackbar. TopAppBar — obere Leiste. BottomNavigation — untere Navigation (NavigationBar in Material 3). Modifier — Kette: .fillMaxWidth().padding(8.dp).clickable { }. Die Reihenfolge der Modifikatoren ist wichtig — jeder erstellt einen neuen Wrapper.

LazyColumn-Optimierung

LazyColumn — virtualisierte Liste. Rendert nur sichtbare Elemente. Optimierung: 1) key — eindeutiger Schlüssel für Element, 2) contentType — Elemente nach Typ gruppieren, 3) itemContent — Neuzusammensetzung innerhalb des Elements minimieren, 4) LazyVerticalGrid / LazyHorizontalGrid — für Raster. LazyLayout — benutzerdefiniertes verzögertes Layout. Paging 3 + Compose — Paginierung über collectAsLazyPagingItems. IT Sectr empfiehlt key(item) für alle LazyColumn für vorhersagbare Neuzusammensetzung.

Navigation (NavController, NavHost)

Navigation Compose — Navigationsbibliothek. NavController — verwaltet den Zielstack. NavHost — Container für den Navigationsgraphen. composable("route") — Ziel registrieren. navController.navigate("route") — navigieren. popBackStack() — zurückgehen. Argumente: composable("detail/{id}", arguments = listOf(navArgument("id") { type = NavType.StringType })). Deep Linking über intentFilter. BottomNavigation — Integration mit NavController: NavBarItem → navigate + popUpTo.

Erweiterte Navigation

Mehrere Back Stacks — separater Back Stack für jeden BottomNavigation-Tab. SavedStateHandle — Argumente bei Prozessende erhalten. NavArgs — typsichere Argumente (Kotlin 2.0+). Deep Links — URL-Schemata für externe Links. Predictive Back Gesture (Android 14+) — Unterstützung der Zurück-Geste mit Vorschau. IT Sectr empfiehlt die Verwendung von NavArgs für Typsicherheit und mehreren Back Stacks für BottomNavigation.

Effekte (LaunchedEffect, DisposableEffect)

LaunchedEffect — startet einen Suspend-Block in Composition. Wird beim Verlassen von Composition abgebrochen. Wird bei Änderung der Keys neu gestartet. Verwendet für: Daten laden, Timer, Animationen. DisposableEffect — für Ressourcen, die Bereinigung benötigen: onDispose { } — von Listenern abmelden, Verbindungen schließen. SideEffect — synchroner Effekt (bei jeder Neuzusammensetzung). Verwendet für: Protokollierung, Synchronisation mit Nicht-Compose-Code. IT Sectr empfiehlt LaunchedEffect zum Laden von Daten und DisposableEffect zur Bereinigung.

Compose — Funktion + Modifikator. SwiftUI — struct + Modifikator. Die Konzepte sind ähnlich, die Syntax ist unterschiedlich. IT Sectr empfiehlt, beide Frameworks zu lernen — das Verständnis des einen erleichtert das Lernen des anderen.

Effektmuster

rememberCoroutineScope — Zugriff auf CoroutineScope außerhalb von LaunchedEffect (z. B. bei Button-Klick). snapshotFlow — State in Flow für Ketten umwandeln. produceState — Nicht-Compose-Quelle in State umwandeln. animateFloatAsState und animateColorAsState — Animationen über Effekte. IT Sectr empfiehlt rememberCoroutineScope für UI-Ereignisse und LaunchedEffect für automatisches Laden.

Theming (MaterialTheme, Material3)

MaterialTheme — globales Compose-Theme. Farben, Typografie, Formen. MaterialTheme { } — umschließt die gesamte App. Material3 (M3) — Google Designsystem 2023+. Dynamic Colors — Anpassung an das Hintergrundbild (Android 12+). TextStyle — Textkonfiguration: fontSize, fontWeight, lineHeight. Shape — Eckenrundung. Elevation — Schatten. IT Sectr empfiehlt standardmäßig Material3 und Dynamic Colors für moderne Geräte.

@Composable
fun AppTheme(content: @Composable () -> Unit) {
    val colorScheme = if (isSystemInDarkTheme()) {
        darkColorScheme(
            primary = Color(0xFFBB86FC),
            secondary = Color(0xFF03DAC6)
        )
    } else {
        lightColorScheme(
            primary = Color(0xFF6200EE),
            secondary = Color(0xFF03DAC6)
        )
    }
    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography(
            bodyLarge = TextStyle(fontSize = 16.sp)
        )
    ) { content() }
}

Animationen (animate*, AnimatedVisibility)

animateFloatAsState — animiert Float-Wert. animateColorAsState — animiert Farbe. animateDpAsState — animiert Größe. AnimatedVisibility — ein-/ausblenden mit .animateEnterExit(). AnimatedContent — Animation bei Inhaltsänderung (crossfade, slide). updateTransition — Animation basierend auf Enum-Zustand. Animatable — benutzerdefinierte Animation über Animatable-Schnittstelle. IT Sectr empfiehlt AnimatedVisibility für Listen und AnimatedContent für Bildschirmübergänge.

@Composable
fun AnimatedCounter(count: Int) {
    val animatedCount by animateFloatAsState(
        targetValue = count.toFloat(),
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessLow
        )
    )

    AnimatedContent(targetState = count) { targetCount ->
        Text(
            text = "$targetCount",
            style = MaterialTheme.typography.displayLarge,
            modifier = Modifier.animateContentSize()
        )
    }
}

Testen (Compose UI Test)

Compose UI Test — Testen von Compose-Bildschirmen. createComposeRule() — JUnit-Regel. setContent { } — Composable setzen. onNodeWithText, onNodeWithTag, onNodeWithContentDescription — Elemente finden. performClick, performTextInput, performScrollTo — Aktionen. assertIsDisplayed, assertTextEquals — Behauptungen. Semantics — Semantics-Baum für Barrierefreiheit und Tests. IdlingResource — auf asynchrone Operationen warten. Screenshot-Tests — Papercuts, Roborazzi. IT Sectr empfiehlt UI-Tests für jeden Bildschirm und Unit-Tests für ViewModel.

WindowSizeClass — Anpassung an Bildschirmgröße (Compact, Medium, Expanded). Verwandt mit responsiven Material3-Layouts. Wird in Adaptive Navigation Suite für automatischen Wechsel von BottomNavigation zu NavigationRail verwendet. IT Sectr empfiehlt WindowSizeClass für Tablet- und Desktop-Compose-Anpassung.

Paging 3 + Compose — Paginierungsbibliothek von Google. PagingData — Seitenstrom. PagingConfig — Einstellungen (pageSize, prefetchDistance). collectAsLazyPagingItems() — in Compose sammeln. PagingSource — benutzerdefinierte Quelle. RemoteMediator — hybrides Laden (Netzwerk + DB). Paging 3 ist der Standard für unendliche Scroll-Listen in Compose.