Jetpack Compose Academy · Lektion

Wiederverwendbare Composables auslagern

Strukturieren Sie den Bildschirm in übersichtliche Komponenten um.

Wiederverwendbare Composables auslagern ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

Time to Refactor

Your card works, but it is one long function. Now you will split it into small, named Composables that are easier to read and reuse. 🧩

Spot Repeated Patterns

The three stat blocks are nearly identical. Repeated shapes like that are a strong signal to extract a single reusable Composable.

Extract StatBlock

Pull one stat into its own function. Pass the differing values, the count and label, in as parameters.

@Composable
fun StatBlock(count: String, label: String) {
    Column { Text(count); Text(label) }
}

Reuse It Three Times

Now the stats Row is just three clean calls. The same StatBlock renders different data each time, with zero duplication.

Row {
    StatBlock("128", "Posts")
    StatBlock("4.2k", "Followers")
    StatBlock("180", "Following")
}

Extract the Header

Group the avatar, name, and bio into a ProfileHeader Composable. The big screen function gets shorter and far easier to scan.

@Composable
fun ProfileHeader(name: String, bio: String) {
    Column { /* avatar, name, bio */ }
}

Name Things Clearly

Good Composable names describe what you see: ProfileHeader, StatBlock, FollowButton. Clear names make the card read like a sentence.

Pass Data In

Keep components flexible by accepting parameters instead of hard-coding values. The same ProfileHeader can show any user.

ProfileHeader(name = "Ada Lovelace", bio = "Building apps.")

Hoist the Click Out

Let the parent decide what a tap does. Expose an onFollowClick lambda parameter so FollowButton stays generic.

@Composable
fun FollowButton(onClick: () -> Unit) {
    Button(onClick = onClick) { Text("Follow") }
}

Assemble the Screen

The top-level ProfileCard now just composes the pieces in order. Each child Composable owns one job, which is the Compose way.

Column {
    ProfileHeader(name, bio)
    StatsRow(stats)
    FollowButton(onFollow)
}

Add a Modifier Parameter

Truly reusable Composables accept a Modifier parameter, defaulting to Modifier. Callers can then size and pad them from outside.

@Composable
fun StatBlock(
    count: String,
    label: String,
    modifier: Modifier = Modifier
) { /* ... */ }

Clean and Reusable

Your one giant function is now several small, focused, reusable Composables. This structure scales as your app grows in complexity. 🎉

Quick Check

What makes a Composable reusable across different data?

Recap: You Shipped a Card

You refactored the profile card into small reusable Composables with parameters and a Modifier slot. You now have a clean, scalable screen built end to end.

Häufig gestellte Fragen

Ist die Lektion „Wiederverwendbare Composables auslagern“ kostenlos?

Ja — der vollständige Text von „Wiederverwendbare Composables auslagern“ 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 „Wiederverwendbare Composables auslagern“?

Strukturieren Sie den Bildschirm in übersichtliche Komponenten um. 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 4 von 4.

Wie lange dauert die Lektion „Wiederverwendbare Composables auslagern“?

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

← Zurück zu Jetpack Compose Academy