Aufbau einer @Composable-Funktion
Lesen Sie eine Composable und erkennen Sie, was sie besonders macht.
Aufbau einer @Composable-Funktion ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Jetpack Compose Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.
What Is a Composable?
Ein Composable ist lediglich eine Kotlin-Funktion, die einen Teil der Benutzeroberfläche beschreibt. Rufe sie auf, und Compose zeichnet diese Benutzeroberfläche auf dem Bildschirm. Sie ist der Baustein für alles. 🧱
The @Composable Annotation
Das Magic-Marker-Symbol @Composable steht über der Funktion. Es signalisiert dem Compose-Compiler, dass diese Funktion UI ausgeben kann und bei Datenänderungen neu zusammengesetzt (recomposed) werden darf.
@Composable
fun Greeting() {
Text("Hello!")
}Name It Like a UI Piece
Konventionsgemäß verwenden Composable-Namen PascalCase-Substantive wie Greeting oder ProfileCard, keine Verben. Der Name beschreibt das Element auf dem Bildschirm, nicht eine Aktion.
It Returns Unit
Eine Composable gibt normalerweise nichts (Unit) zurück. Anstatt eine Benutzeroberfläche zurückzugeben, emittiert sie diese, indem sie innerhalb ihres Rumpfes andere Composables aufruft. Der Seiteneffekt ist dabei das Zeichnen.
Built-In Composables
Compose liefert fertige Composables wie Text, Button, Image und Icon mit. Du kombinierst diese, um deine eigenen zu erstellen, sodass du nur selten bei einem leeren Blatt Papier anfangen musst.
@Composable
fun Welcome() {
Text("Welcome to Compose")
}Parameters Pass In Data
Composables akzeptieren Parameter genau wie jede andere Funktion. Übergeben Sie Daten, und die Benutzeroberfläche spiegelt diese wider. So kann dieselbe Komponente unterschiedliche Inhalte anzeigen.
@Composable
fun Greeting(name: String) {
Text("Hello, " + name)
}The Modifier Parameter
Die meisten Composables akzeptieren einen Modifier, um Größe, Innenabstände und Layout zu steuern. Er ist konventionsgemäß der erste optionale Parameter und kann von dir nach Belieben angepasst werden.
Composables Call Composables
Eine Composable-Funktion kann nur aus einer anderen Composable-Funktion heraus aufgerufen werden. Diese Regel ermöglicht es Compose, den UI-Baum nachzuverfolgen und die entsprechenden Teile bei Zustandsänderungen neu zu zeichnen (rekomponieren).
Keep Them Small
Setzen Sie auf kleine, fokussierte Composables, die jeweils eine Aufgabe erfüllen. Winzige Bausteine lassen sich später einfacher wiederverwenden, in der Vorschau anzeigen und zu größeren Bildschirmen kombinieren.
Prefer No Side Effects
Ein gutes Composable ist vorhersehbar: gleiche Eingaben, gleiche Benutzeroberfläche. Vermeiden Sie Überraschungen wie Netzwerkaufrufe im Rumpf, da Compose diesen viele Male ausführen kann.
Compose Builds a Tree
Wenn Composables einander aufrufen, bilden sie einen UI-Baum. Compose durchläuft diesen Baum, um den Bildschirm zu zeichnen und nur die geänderten Zweige zu aktualisieren.
Quick Check
Lass uns überprüfen, was eine Funktion als UI-Builder kennzeichnet.
Recap: The Composable
Ein Composable ist eine Kotlin-Funktion mit @Composable, die eine Benutzeroberfläche ausgibt, Parameter entgegennimmt, einen Modifier akzeptiert und andere Composables aufruft, um eine Hierarchie aufzubauen.
Häufig gestellte Fragen
Ist die Lektion „Aufbau einer @Composable-Funktion“ kostenlos?
Ja — der vollständige Text von „Aufbau einer @Composable-Funktion“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Jetpack Compose Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Aufbau einer @Composable-Funktion“?
Lesen Sie eine Composable und erkennen Sie, was sie besonders macht. Du übst Jetpack Compose Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Jetpack Compose Academy zu starten?
Keine Vorkenntnisse erforderlich. Jetpack Compose Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Aufbau einer @Composable-Funktion“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Jetpack Compose Academy-Lektion Code schreiben und ausführen?
Ja. Jede Jetpack Compose Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Was Compose ersetzt: Abschied von XML
- Android Studio für Compose einrichten
- Aufbau einer @Composable-Funktion
- Ihre erste App im Emulator ausführen