Android Academy · Lektion

Ihr erstes Composable

Erstellen und Vorschauen Sie eine Composable-Funktion.

Ihr erstes Composable ist eine kostenlose Android Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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 Android Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.

Ihr erstes Composable

Ein Composable ist einfach eine Kotlin-Funktion, die mit @Composable gekennzeichnet ist. Schreiben wir eine Funktion, die eine Benutzerin oder einen Benutzer mit Namen begrüßt.

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

Die Annotation @Composable

Die Annotation @Composable teilt dem Compiler mit, dass diese Funktion UI ausgeben und andere Composables aufrufen kann. Ohne sie können Sie Text, Button oder andere UI-Funktionen nicht aufrufen.

Namenskonvention

Composables, die UI ausgeben, werden mit PascalCase-Substantiven benannt, etwa Greeting oder ProfileCard — ähnlich wie eine Klasse. Das signalisiert „Diese Funktion zeichnet etwas“ und nicht „Diese Funktion gibt einen Wert zurück“.

Parameter steuern die UI

Ein Composable nimmt genau wie jede andere Funktion Parameter entgegen. Diese Parameter sind Ihre Eingaben. Unterschiedliche Argumente erzeugen eine unterschiedliche UI.

@Composable
fun Greeting(name: String) {
    Text(text = "Welcome, $name")
}
// Greeting("Sam") and Greeting("Mia") render different text

Composables aufrufen

Composables können nur aus anderen Composables aufgerufen werden. Sie erstellen einen Bildschirm, indem Sie Aufrufe verschachteln.

@Composable
fun WelcomeScreen() {
    Greeting(name = "Ada")
    Greeting(name = "Grace")
}

Hosting mit setContent

Damit Composables tatsächlich angezeigt werden, ruft eine Activity in onCreate setContent { } auf. Die Lambda-Funktion bildet die Wurzel Ihrer Compose-UI.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            WelcomeScreen()
        }
    }
}

Composables geben Unit zurück

Beachten Sie, dass Composables kein UI-Objekt zurückgeben. Ihr Rückgabetyp ist Unit, und sie geben UI als Seiteneffekt ihres Aufrufs aus. Sie erstellen UI durch Aufrufen, nicht durch das Zurückgeben von Werten.

Standardparameter

Kotlin-Standardargumente eignen sich hier hervorragend. Geben Sie einem Parameter einen Standardwert, damit Aufrufer ihn weglassen können.

@Composable
fun Greeting(name: String = "Guest") {
    Text(text = "Hello, $name!")
}
// Greeting() shows "Hello, Guest!"

Composables wiederverwenden

Da Composables Funktionen sind, können sie wiederverwendet werden. Definieren Sie Greeting einmal und rufen Sie es überall mit unterschiedlichen Namen auf. So vermeiden Sie doppelt vorhandenen UI-Code.

Halten Sie sie klein

Gute Composables sind klein und fokussiert. Ein Composable sollte einen logischen UI-Teil beschreiben. Erstellen Sie größere Bildschirme, indem Sie kleine Composables kombinieren.

Alles zusammenfügen

Hier sehen Sie ein vollständiges erstes Composable, das in eine Activity eingebunden ist. Wenn Sie es auf einem Gerät ausführen, wird „Hello, Compose!“ angezeigt.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting(name = "Compose")
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

Kurze Überprüfung

Was ermöglicht die Annotation @Composable einer Funktion?

Rückblick

Sie haben Ihr erstes Composable geschrieben. Denken Sie daran:

Kennzeichnen Sie UI-Funktionen mit @Composable.
Verwenden Sie Namen im PascalCase.
Parameter sind die Eingaben, die die UI bestimmen.
setContent { } nimmt Composables in einer Activity auf.

Häufig gestellte Fragen

Ist die Lektion „Ihr erstes Composable“ kostenlos?

Ja — der vollständige Text von „Ihr erstes Composable“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Android Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Ihr erstes Composable“?

Erstellen und Vorschauen Sie eine Composable-Funktion. Du übst Android 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 Android Academy zu starten?

Keine Vorkenntnisse erforderlich. Android 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 2 von 4.

Wie lange dauert die Lektion „Ihr erstes Composable“?

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 Android Academy-Lektion Code schreiben und ausführen?

Ja. Jede Android 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

← Zurück zu Android Academy