Composable Function: Was es ist, Funktionssyntax und Regeln

Was ist eine Composable Function in Jetpack Compose

Eine Composable Function ist eine Funktion in der Sprache Kotlin, die mit der @Composable-Annotation markiert ist und einen Teil der Benutzeroberfläche deklarativ beschreibt. Anstatt View-Objekte durch Java-Code oder XML-Markup zu erstellen und zu konfigurieren, schreibt der Entwickler einfach, wie die UI für jeden Datenzustand aussehen soll.

Der Hauptunterschied zwischen einer Composable-Funktion und dem traditionellen Android-View-System liegt im Aktualisierungsmodell. Beim klassischen Ansatz rief der Entwickler manuell findViewById auf, änderte Text über setText und verwaltete die Sichtbarkeit über setVisibility. Composable Function befreit Sie von dieser Routine: Wenn sich Daten ändern, bestimmt das System selbst, welche Funktionen neu zusammengesetzt werden müssen, und führt nur diese aus.

Der Kotlin-Compiler generiert bei der Verarbeitung der @Composable-Annotation zusätzlichen Code, der die Funktion in den Kompositionsmechanismus integriert. Dieser Code umfasst das Lesen und Schreiben in Slots — spezielle Speicherzellen, die den Zustand und die Parameter jeder Composable-Funktion im aktuellen UI-Baum speichern. Dank dieser Integration weiß Compose, welche Funktionen von welchen Daten abhängen.

Syntax der Deklaration einer Composable-Funktion

Die Syntax einer Composable-Funktion ist äußerst prägnant: Fügen Sie einfach @Composable vor dem Schlüsselwort fun hinzu. Die Funktion kann beliebige Parameter annehmen, andere Composable-Aufrufe in ihrem Rumpf enthalten und Kotlin-Konstrukte — Bedingungen, Schleifen, when-Ausdrücke — für bedingte UI-Rendering verwenden.

@Composable
fun ProductItem(
    product: Product,
    modifier: Modifier = Modifier,
    onAddToCart: () -> Unit
) {
    Card(modifier = modifier.padding(8.dp)) {
        Row(modifier = Modifier.fillMaxWidth().padding(12.dp),
            verticalAlignment = Alignment.CenterVertically) {
            Column(modifier = Modifier.weight(1f)) {
                Text(text = product.name, style = MaterialTheme.typography.titleMedium)
                Text(text = "${product.price}", color = MaterialTheme.colorScheme.primary)
            }
            Button(onClick = onAddToCart) {
                Text("In den Warenkorb")
            }
        }
    }
}

In diesem Beispiel nimmt die Composable-Funktion ProductItem ein Product-Objekt, einen Modifikator und einen Callback an. Alle drei Parameter sind unveränderlich, was ein vorhersagbares Verhalten während der Neuzusammensetzung garantiert. Der Modifikator wird als Parameter mit einem Standardwert übergeben — dies ist eine Standardpraxis, die dem Aufrufer ermöglicht, Abstände und Größen anzupassen.

Komponenten und Modifikatoren in Composable-Funktionen

Innerhalb einer Composable-Funktion werden integrierte Material Design-Komponenten (Text, Button, Card, TextField) oder grundlegende Primitive (Canvas, Layout) verwendet. Jede Komponente akzeptiert Parameter zur Konfiguration von Aussehen und Verhalten sowie einen oder mehrere Modifikatoren über den Parameter modifier.

Modifikatoren sind eine Kette von Funktionen, die Größe, Position, Ereignisbehandlung und Aussehen einer Komponente ändern. Die Reihenfolge der Modifikatoren in der Kette ist wichtig: clickable.semantics funktioniert anders als semantics.clickable, und padding.background färbt sowohl den Bereich als auch den Hintergrund einschließlich des Padding, was beim Entwerfen von entscheidender Bedeutung ist.

Innerhalb einer Composable-Funktion können Sie if- und when-Bedingungen für bedingtes Rendern von UI-Teilen sowie for-Schleifen für dynamische Listen verwenden. Alle diese Konstrukte funktionieren auf natürliche Weise, da Kotlin eine vollwertige Programmiersprache ist. Es ist jedoch wichtig zu beachten: Wenn eine Bedingung oder Schleife Composable-Funktionsaufrufe enthält, nehmen diese auch an der Neuzusammensetzung teil.

@Composable
fun ProductList(
    products: List<Product>,
    modifier: Modifier = Modifier
) {
    LazyColumn(modifier = modifier) {
        items(products, key = { it.id }) { product ->
            ProductItem(
                product = product,
                onAddToCart = { /* add to cart */ }
            )
        }
    }
}

Beispiele für Composable-Funktionen für reale Bildschirme

Betrachten wir ein Beispiel einer Produktsuchmaske mit mehreren Composable-Funktionen. Typische Muster werden hier gezeigt: ein Eingabefeld mit Zustand, Listenfilterung, Behandlung leerer Ergebnisse und Laden.

data class Product(
    val id: String,
    val name: String,
    val price: Double,
    val category: String
)

@Composable
fun SearchScreen() {
    var query by remember { mutableStateOf("") }
    val products = remember(query) { getFilteredProducts(query) }

    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        OutlinedTextField(
            value = query,
            onValueChange = { query = it },
            label = { Text("Produkte suchen") },
            modifier = Modifier.fillMaxWidth()
        )

        Spacer(modifier = Modifier.height(16.dp))

        when (products) {
            is Loading -> CircularProgressIndicator()
            is Empty -> Text("Keine Ergebnisse gefunden")
            is Result -> LazyColumn {
                items(products.items, key = { it.id }) { product ->
                    ProductItem(product = product, onAddToCart = {})
                }
            }
        }
    }
}

Dieses Beispiel zeigt mehrere Idiome auf einmal: remember zum Erhalten des Suchabfragezustands, remember(query) zum Filtern mit einem Schlüssel, when für drei UI-Zustände und LazyColumn für effizientes Listen-Rendering. Jedes dieser Idiome ist das Ergebnis praktischer Erfahrung bei der Entwicklung von Compose-Anwendungen.

Parameter und Slot API

Composable-Funktionen akzeptieren Parameter genauso wie normale Kotlin-Funktionen, aber mit einem wichtigen Unterschied: Ein Parameter kann eine andere Composable-Funktion sein, die über eine Lambda mit der @Composable-Annotation übergeben wird. Dieser Mechanismus wird Slot API genannt und ist das Hauptmuster zum Erstellen wiederverwendbarer Container.

Die Slot API löst das Problem, das im traditionellen View-System über ViewGroup und das programmgesteuerte Hinzufügen von untergeordneten Views gelöst wurde. Anstelle von addView-Methoden verwendet Compose content-Lambdas — den letzten Parameter mit dem Typ @Composable () -> Unit. Der Aufrufer übergibt beliebige UI in diese Lambda, und der Container definiert nur sein Layout.

Parameter von Composable-Funktionen können Standardwerte haben, was ihre Verwendung in verschiedenen Kontexten vereinfacht. Es wird empfohlen, nur die Parameter obligatorisch zu machen, ohne die die Funktion ihre Aufgabe nicht erfüllen kann, und für die übrigen vernünftige Standardwerte bereitzustellen.

Idiome von Composable-Funktionen in Kotlin

In der Compose-Community haben sich mehrere etablierte Idiome herausgebildet, die Composable-Funktionen lesbarer und vorhersagbarer machen. Das erste ist State Hoisting: Der Zustand wird auf eine höhere Ebene gehoben, und die Composable-Funktion erhält ihn über Parameter. Dies macht die Funktion rein und in verschiedenen Kontexten wiederverwendbar.

Das zweite Idiom sind Event-driven Parameter. Anstatt eine ViewModel oder useCase an eine Composable-Funktion zu übergeben, werden nur spezifische Callbacks übergeben: onSave, onDelete, onNavigateToDetail. Dies reduziert die Kopplung und vereinfacht das Testen — ein Test für ProductItem benötigt keine ViewModel, sondern nur einen Lambda-Stub.

Das dritte Idiom ist CompositionLocal zum Übergeben gemeinsamer Daten durch den Kompositionsbaum. Theme, Bildschirmdichte, aktuelle Route — all dies wird über CompositionLocal übergeben, wodurch Parameterketten durch Dutzende von Composable-Funktionen vermieden werden. CompositionLocal sollte jedoch nicht übermäßig verwendet werden: Explizite Parameter sind impliziten Abhängigkeiten immer vorzuziehen.

// State Hoisting: Zustand in die Elternfunktion gehoben
@Composable
fun CounterDisplay(
    count: Int,
    onIncrement: () -> Unit
) {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text(text = "Zähler: $count", style = MaterialTheme.typography.headlineLarge)
        Button(onClick = onIncrement) {
            Text("+1")
        }
    }
}

// Verwendung mit State Hoisting
@Composable
fun CounterScreen() {
    var count by remember { mutableStateOf(0) }
    CounterDisplay(
        count = count,
        onIncrement = { count++ }
    )
}