Eine @Composable-Funktion schreiben
Definieren Sie Ihre eigene wiederverwendbare UI-Funktion.
Eine @Composable-Funktion schreiben ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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 You Will Build
In dieser Lektion schreibst du dein eigenes Composable von Grund auf. Am Ende wirst du in der Lage sein, ein UI-Element mit einer einzigen Kotlin-Funktion zu beschreiben. 🚀
It Starts With @Composable
Ein Composable ist einfach eine Funktion, die mit der Annotation @Composable markiert ist. Dieses Tag teilt Compose mit, dass diese Funktion die Benutzeroberfläche ausgibt, anstatt einen Wert zurückzugeben.
@Composable
fun Greeting() {
Text("Hello!")
}Name It Like a Type
Composables, die UI ausgeben, verwenden PascalCase-Namen, wie eine Klasse. Man schreibt also Greeting und nicht greeting, um zu signalisieren, dass es sich um einen UI-Baustein handelt.
They Return Unit
Ihr Composable gibt keinen Wert zurück. Es emittiert UI, indem es andere Composables darin aufruft, daher ist sein Rückgabetyp einfach Unit.
@Composable
fun Welcome() {
Text("Welcome aboard")
}Pass Data With Parameters
Mache ein Composable wiederverwendbar, indem du Parameter hinzufügst. Übergebe einen Namen, und dieselbe Funktion kann jeden begrüßen, den du möchtest.
@Composable
fun Greeting(name: String) {
Text("Hello, " + name)
}Default Values Help
Vergeben Sie Standardwerte für Parameter, damit Aufrufer diese überspringen können. Hier wird der Name standardmäßig auf World gesetzt, sodass Greeting() auch für sich allein funktioniert.
@Composable
fun Greeting(name: String = "World") {
Text("Hello, " + name)
}Built-in Composables
Sie fangen selten bei Null an. Setzen Sie Schiffe aus vorgefertigten Teilen wie Text, Button und Image zusammen, die Sie aus Ihrer eigenen Funktion heraus aufrufen.
Import What You Use
Wenn Sie Text aufrufen, fügt Android Studio einen Import für androidx.compose.material3.Text hinzu. Überlassen Sie den automatischen Import der IDE, damit Sie nie das Paket erraten müssen.
Keep Functions Small
Jedes Composable sollte eine klare Aufgabe beschreiben. Eine kleine, fokussierte Funktion ist einfacher zu lesen, wiederzuverwenden und in der Vorschau anzuzeigen als eine riesige.
No Return, Just Calls
Innerhalb eines Composables baust und gibst du kein Widget zurück. Du rufst andere Composables einfach von oben nach unten auf, und Compose zeichnet sie in dieser Reihenfolge.
@Composable
fun Card() {
Text("Title")
Text("Subtitle")
}It Is Still Kotlin
Eine Composable-Funktion ist im Grunde normaler Kotlin-Code. Sie können darin Variablen, Bedingungen und Schleifen genau wie in jeder anderen Funktion verwenden.
@Composable
fun Status(online: Boolean) {
if (online) Text("Online")
else Text("Offline")
}Quick Check
Zeit für eine kurze Überprüfung dessen, was eine Composable ausmacht.
Recap
Sie können jetzt eine Composable schreiben: Markieren Sie sie mit @Composable, benennen Sie sie in PascalCase, übergeben Sie Parameter und rufen Sie andere Composables auf, um UI auszugeben. 🎉
Häufig gestellte Fragen
Ist die Lektion „Eine @Composable-Funktion schreiben“ kostenlos?
Ja — der vollständige Text von „Eine @Composable-Funktion schreiben“ 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 „Eine @Composable-Funktion schreiben“?
Definieren Sie Ihre eigene wiederverwendbare UI-Funktion. 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 1 von 4.
Wie lange dauert die Lektion „Eine @Composable-Funktion schreiben“?
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
- Eine @Composable-Funktion schreiben
- Live-Previews mit @Preview
- Composables aus Composables aufrufen
- setContent: Wo Ihre UI beginnt