Jetpack Compose: Grundlagen, Composable-Funktionen und State

Was ist Jetpack Compose?

Jetpack Compose ist ein UI-Framework von Google, das auf den Prinzipien der reaktiven Programmierung aufbaut. Anstelle von Activity mit XML-Layout, FragmentManager und ViewBinding beschreibt der Entwickler die Oberfläche über Kotlin-Funktionen mit der @Composable-Annotation. Compose verwendet keinen LayoutInflater — die UI besteht aus reinen Kotlin-Funktionen, die in Bytecode kompiliert werden. Das Framework besteht aus mehreren Bibliotheken: Compose UI (Basiskomponenten Text, Button, Column, Row), Compose Foundation (Material Design, Gestures, Focus), Compose Material3 (Material You mit Dynamic Colors) und Compose Runtime (State, Side Effects, Coroutines). Compose funktioniert ab Android API 21+ (Android 5.0) und ist vollständig kompatibel mit vorhandenem View/XML-Code über ComposeView — einen AndroidView-Adapter.

Compose vs. View System

View System (2008) verwendet eine Hierarchie von View-Objekten mit manueller Verwaltung: Der Entwickler erstellt ein XML-Layout, findet Views über findViewById, implementiert einen Adapter für RecyclerView und ruft bei Datenänderungen notifyDataSetChanged auf. Compose beschreibt die UI funktional: Bei Zustandsänderungen komponiert das Framework nur die geänderten Composable-Funktionen neu, berechnet das Diff und wendet minimale Änderungen auf die Canvas an. Die Leistung von Compose ist mit dem View System vergleichbar, und bei komplexen Listen (LazyColumn) übertrifft es RecyclerView oft durch das Überspringen unnötiger Elemente mittels des key-Parameters. Bei IT Sectr wird Compose für neue Module von Android-Anwendungen mit minSdk 24+ verwendet.

Composable-Funktionen: Bausteine der UI

@Composable — eine Annotation, die eine normale Kotlin-Funktion in einen UI-Baustein verwandelt. Composable-Funktionen können andere Composable-Funktionen aufrufen und bilden so eine Komponentenbaum. Im Gegensatz zu View haben Composable-Funktionen standardmäßig keinen Zustand — sie sind zustandslos und werden bei jeder Änderung von Eingabeparametern oder State neu gezeichnet. Der Compose Compiler transformiert @Composable-Funktionen in Code, der unterbrochen und fortgesetzt werden kann (positional Memoization) — dies ermöglicht Compose, nur die geänderten Teile neu zu starten, ohne den gesamten Baum neu aufzubauen.

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun UserProfile(name: String, avatarUrl: String) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        AsyncImage(
            model = avatarUrl,
            contentDescription = "User avatar",
            modifier = Modifier.size(48.dp)
        )
        Spacer(modifier = Modifier.width(12.dp))
        Text(
            text = name,
            style = MaterialTheme.typography.titleMedium
        )
    }
}

Die Funktion UserProfile akzeptiert name und avatarUrl als Parameter und erstellt eine Zeile mit einem Avatar und Namen. Modifier.fillMaxWidth() dehnt die Komponente auf die volle Breite aus, .padding(16.dp) fügt Abstände hinzu. MaterialTheme.typography.titleMedium verwendet den systemweiten Material 3-Stil. Bei Änderung der Parameter name oder avatarUrl komponiert Compose UserProfile neu — die Komponente wird mit neuen Werten neu erstellt.

State und Recomposition in Jetpack Compose

State ist in Compose jeder Wert, dessen Änderung eine Neukomposition (Neustart) abhängiger @Composable-Funktionen auslöst. Der grundlegende Ansatz ist mutableStateOf(), das ein MutableState<T> mit Unterstützung des Compose-Snapshot-Systems erstellt. Snapshot ist ein Mechanismus zur Änderungsverfolgung: Beim Schreiben in State markiert Compose den aktuellen Snapshot als dirty, und der Neukompositions-Planer startet nur die Composable-Funktionen neu, die diesen State lesen. Für beobachtbare Sammlungen verwenden Sie mutableStateListOf() und mutableStateMapOf(). Compose unterstützt State aus Lifecycle-Aware-Komponenten über collectAsState() für Kotlin Flow und observeAsState() für LiveData.

@Composable
fun LikeButton() {
    var liked by remember { mutableStateOf(false) }
    var count by remember { mutableStateOf(42) }
    
    Button(
        onClick = {
            liked = !liked
            if (liked) count++ else count--
        },
        colors = ButtonDefaults.buttonColors(
            containerColor = if (liked) MaterialTheme.colorScheme.primary
                else MaterialTheme.colorScheme.surfaceVariant
        )
    ) {
        Text("♥ $count")
    }
}

Der Code erstellt einen "Like"-Button mit dem Zustand liked (Boolean) und count (Int), die über mutableStateOf() gespeichert werden. Bei Berührung wird liked umgekehrt und der Zähler erhöht/verringert sich — Compose komponiert LikeButton automatisch neu. Der by-Delegat erlaubt die Verwendung von State wie eine normale Variable: liked = !liked statt liked.value = !liked.value. Die Button-Farbe wechselt reaktiv zwischen primary (geliked) und surfaceVariant (nicht geliked).

remember: Zwischenspeicherung zwischen Neukompositionen

remember — eine Compose-Funktion, die einen Wert zwischen Neukompositionen zwischenspeichert. Ohne remember erzeugt jeder Neustart einer Composable-Funktion einen neuen Zustand (mutableStateOf) — dies bricht die Anwendungslogik: Bei Bildschirmdrehung oder Änderung des übergeordneten State wird der Zähler zurückgesetzt. remember akzeptiert ein Berechnungs-Lambda und berechnet den Wert nur bei der ersten Komposition; bei folgenden gibt es das zwischengespeicherte Ergebnis zurück. Zum Zurücksetzen des Caches verwenden Sie remember(key) — der Schlüssel bestimmt, wann der Wert neu berechnet wird. remember(key1, key2) berechnet neu, wenn sich ein beliebiger Schlüssel ändert. Für langlebige Zustände (die Bildschirmdrehung überleben) verwenden Sie rememberSaveable — ein Analogon zu remember mit Speicherung im Bundle über SavedStateHandle.

@Composable
fun TimerScreen() {
    var seconds by rememberSaveable { mutableStateOf(0) }
    
    LaunchedEffect(Unit) {
        while (true) {
            delay(1000)
            seconds++
        }
    }
    
    Column(
        modifier = Modifier.fillMaxSize().padding(32.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Elapsed: ${seconds}s",
            style = MaterialTheme.typography.displayMedium
        )
    }
}

rememberSaveable bewahrt seconds bei Bildschirmdrehung (Konfigurationsänderung). LaunchedEffect startet eine Coroutine, die seconds jede Sekunde inkrementiert. Bei der Neukomposition von TimerScreen (jede Sekunde) wird seconds dank rememberSaveable nicht zurückgesetzt. Verwenden Sie normales remember für Zustände, die Konfigurationsänderungen nicht überleben sollen (z. B. Animationsflags).

Modifier: Kette von Composable-Einstellungen

Modifier — ein unveränderliches Container-Objekt, das das Builder-Muster zur Konfiguration des Aussehens, Verhaltens und Layouts von Composable-Komponenten implementiert. Jeder Aufruf einer Modifier-Methode (.padding(), .width(), .clickable(), .background()) gibt einen neuen Modifier mit dem hinzugefügten Element zurück. Die Reihenfolge der Modifier ist wichtig: .padding(16.dp).clickable { } — der Abstand wird vor dem Click-Handler angewendet, clickable verfolgt den gesamten Bereich einschließlich Abstand. .clickable { }.padding(16.dp) — der gesamte Bereich vor dem Abstand ist klickbar, der Abstand verschiebt den Inhalt nach innen. Modifier unterstützt benutzerdefinierte Implementierungen über then(otherModifier) und compositionLocal für den Zugriff auf übergeordnete Einstellungen.

@Composable
fun CardExample() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .clickable { println("Card clicked") },
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surfaceVariant
        )
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text("Jetpack Compose", style = MaterialTheme.typography.titleLarge)
            Spacer(modifier = Modifier.height(8.dp))
            Text(
                "Deklarative UI für Android mit State und Modifier",
                style = MaterialTheme.typography.bodyMedium
            )
        }
    }
}

CardExample demonstriert die Modifier-Kette: fillMaxWidth + padding + clickable. Card ist eine Material3-Komponente mit eigenen elevation- und colors-Einstellungen. Die verschachtelte Column hat einen inneren Abstand von 16dp. Compose Material3 passt Farben unter Android 12+ automatisch an Dynamic Color (Material You) an. Card ist eine von über 30 integrierten Material3-Komponenten in Compose.

State hoisting und Compose-Architektur

State hoisting — ein Muster, bei dem der Zustand aus einer Composable-Funktion in ihren Aufrufer angehoben wird, wodurch die Funktion zustandslos wird. Eine zustandslose Komponente empfängt Daten und Callbacks über Parameter, ohne State selbst zu besitzen. Dies verbessert die Wiederverwendbarkeit und Testbarkeit: Die Komponente kann mit verschiedenen States aufgerufen und in der Vorschau getestet werden. Google empfiehlt die Architektur: ViewModel + StateFlow (oder MutableStateFlow) + collectAsState() in Compose. ViewModel hebt den Zustand auf Bildschirmebene, Compose rendert ihn. Side Effects (LaunchedEffect, DisposableEffect) behandeln einmalige Ereignisse.