Jetpack Compose Academy · Lektion

Statistikzeile und Follow-Button

Fügen Sie der Karte interaktive Details hinzu.

Statistikzeile und Follow-Button 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.

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

Add the Interactive Details

With the header done, you will add the lower half: a row of stats and a follow button that responds to taps. This is where the card comes alive. ⚡

One Stat Block

Each stat is two stacked Texts: a big number and a small label. A tiny Column holds them together as one neat block.

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    Text("128")
    Text("Posts")
}

Emphasize the Number

The count should pop while the label stays quiet. Give the number a bold style and the label a smaller one.

Text("128", style = MaterialTheme.typography.titleMedium)
Text("Posts", style = MaterialTheme.typography.labelSmall)

Put Stats in a Row

Three stat blocks sit side by side, so wrap them in a Row. Each block becomes a child laid out left to right.

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

Space the Stats Evenly

Spread the blocks across the card with Arrangement.SpaceEvenly on the Row, so the gaps are equal and balanced.

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceEvenly
) { /* ... */ }

Add the Follow Button

Below the stats, add a Button. Its onClick lambda runs your code the moment the user taps it.

Button(onClick = { /* follow */ }) {
    Text("Follow")
}

Make It Full Width

A primary action button reads best across the whole card. Add fillMaxWidth so it spans edge to edge.

Button(
    onClick = { /* follow */ },
    modifier = Modifier.fillMaxWidth()
) { Text("Follow") }

Track the Follow State

The button should toggle between Follow and Following. Hold that with remember and mutableStateOf so the UI reacts to taps.

var following by remember { mutableStateOf(false) }

Flip State on Tap

Inside onClick, flip the boolean. Compose notices the state changed and redraws the button with new text automatically.

Button(onClick = { following = !following }) {
    Text(if (following) "Following" else "Follow")
}

Wire It Into the Card

Drop the stats Row and the Button below the header inside the outer Column. The full card now reads top to bottom in order.

An Interactive Card

You now have stats, a follow button, and live state. Tapping really changes the screen, which is the heart of a declarative Compose UI. 🎉

Quick Check

What lets the button text update when tapped?

Recap: Stats and Action

You built a Row of evenly spaced stat blocks and a full-width follow button driven by remembered state. Next you will refactor it all into clean, reusable pieces.

Häufig gestellte Fragen

Ist die Lektion „Statistikzeile und Follow-Button“ kostenlos?

Ja — der vollständige Text von „Statistikzeile und Follow-Button“ 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 „Statistikzeile und Follow-Button“?

Fügen Sie der Karte interaktive Details hinzu. 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 „Statistikzeile und Follow-Button“?

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