Jetpack Compose Academy · Урок

Строка статистики и кнопка подписки

Добавьте в карточку интерактивные элементы.

«Строка статистики и кнопка подписки» — бесплатный урок Jetpack Compose Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Jetpack Compose Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Jetpack Compose Academy содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

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.

Часто задаваемые вопросы

Урок «Строка статистики и кнопка подписки» бесплатный?

Да — полный текст урока «Строка статистики и кнопка подписки» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Jetpack Compose Academy, подпишись на CoddyKit PRO. Курс Jetpack Compose Academy содержит 4 уроков всего.

Чему я научусь в уроке «Строка статистики и кнопка подписки»?

Добавьте в карточку интерактивные элементы. Ты практикуешь Jetpack Compose Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Jetpack Compose Academy?

Предыдущий опыт не требуется. Jetpack Compose Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Строка статистики и кнопка подписки»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Jetpack Compose Academy?

Да. Каждый урок Jetpack Compose Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Jetpack Compose Academy