Was ein Composable ist

In Jetpack Compose erstellen Sie Bildschirme, indem Sie Funktionen schreiben, statt XML-Layouts zu inflaten. Ein Composable ist einfach eine Kotlin-Funktion, die einen Teil Ihrer Benutzeroberfläche beschreibt.

Sie kennzeichnen eine solche Funktion mit der Annotation @Composable. Dadurch weiß der Compose-Compiler, dass diese Funktion UI ausgeben und andere Composable-Funktionen aufrufen kann.

Wenn Sie @Composable über einer Funktion hinzufügen, stehen Ihnen die besonderen Möglichkeiten von Compose zur Verfügung. Innerhalb der Funktion können Sie andere Composables wie Text oder Column aufrufen.

Konventionsgemäß beginnen die Namen von Composable-Funktionen mit einem Großbuchstaben, genau wie Klassennamen. Dadurch sind UI-Funktionen im Code leicht zu erkennen.

Ein Composable gibt kein View-Objekt zurück. Stattdessen gibt es UI als Seiteneffekt aus, wenn Compose es ausführt. Sie beschreiben einfach, was auf dem Bildschirm erscheinen soll.

Das nennt man einen deklarativen Stil: Sie geben an, wie die UI für die aktuellen Daten aussehen soll, und Compose kümmert sich darum, wie sie gezeichnet wird.

Die eigentliche Stärke liegt in der Verschachtelung. Ein Composable kann andere Composables aufrufen, sodass Sie komplexe Bildschirme aus kleinen, wiederverwendbaren Bausteinen erstellen können.

Hier ruft ein übergeordnetes Composable ein untergeordnetes Composable auf. Compose führt sie von oben nach unten aus und ordnet die ausgegebene UI an.

Die meisten Composables geben Unit zurück, das heißt, sie liefern keinen nützlichen Wert zurück. Ihre Aufgabe besteht darin, UI auszugeben, nicht darin, einen Wert zurückzugeben.

Sie rufen ein Composable also wegen seiner Auswirkung auf den Bildschirm auf und nicht, um ein Ergebnis zu speichern. Das fühlt sich anders an als bei normalen Funktionen, wird aber schnell selbstverständlich.

Composables können genauso wie normale Kotlin-Funktionen Parameter annehmen. So kann dasselbe Composable unterschiedliche Daten anzeigen.

Hier nimmt Greeting einen name entgegen und zeigt ihn an. Durch die Übergabe von Daten werden Ihre Composables flexibel und in der gesamten App wiederverwendbar.

Da Composables Funktionen sind, können Sie eines mit unterschiedlichen Argumenten mehrfach aufrufen. Jeder Aufruf gibt eine eigene Kopie der UI aus.

So vermeiden Sie Wiederholungen: Schreiben Sie die UI einmal und verwenden Sie sie überall dort wieder, wo Sie sie benötigen.

Sie platzieren Composables in Ihrer Android-Aktivität mit setContent. Dieser Block ist der Einstiegspunkt, an dem Compose die Kontrolle über den Bildschirm übernimmt.

Innerhalb von setContent rufen Sie Ihr oberstes Composable auf. Alles, was es ausgibt, wird zur UI Ihrer App.

Wenn sich die Daten ändern, die ein Composable liest, führt Compose diese Funktion erneut aus, um den Bildschirm zu aktualisieren. Diese erneute Ausführung nennt man Rekomposition.

Sie müssen die UI nicht manuell aktualisieren. Sie ändern die Daten, und Compose führt automatisch eine Rekomposition der betroffenen Composables durch. So bleibt der Bildschirm mit Ihrem Zustand synchron.

Eine gute Gewohnheit besteht darin, jedes Composable nur eine klar definierte Aufgabe erledigen zu lassen. Kleine, fokussierte Composables sind leichter zu lesen, zu testen und wiederzuverwenden.

Wenn eine Funktion zu groß wird, teilen Sie sie in kleinere Composables auf und rufen Sie diese gemeinsam auf. Ihr zukünftiges Ich wird es Ihnen danken.

Composables stammen aus den Compose-Bibliotheken. Häufig importieren Sie androidx.compose.runtime.Composable für die Annotation und androidx.compose.material3.Text für Text.

Android Studio fügt diese Imports normalerweise automatisch hinzu. Wenn ein Import fehlt, ist es hilfreich zu wissen, woher er stammt.

Sehen wir uns noch einmal an, was eine Funktion zu einem Composable macht.

Sie haben gelernt, dass ein Composable eine mit @Composable gekennzeichnete Kotlin-Funktion ist, die UI deklarativ beschreibt. Composables können Parameter annehmen, andere Composables aufrufen und werden mit einem Großbuchstaben benannt.

Sie geben Unit zurück und geben UI aus, anstatt einen Wert zurückzugeben. Wenn sich Daten ändern, führt Compose eine Rekomposition durch, um den Bildschirm zu aktualisieren. Als Nächstes zeigen Sie echten Text an und stapeln Ansichten mit Column.