Выделение переиспользуемых Composable
Переработайте экран в понятные компоненты.
«Выделение переиспользуемых Composable» — бесплатный урок Jetpack Compose Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Jetpack Compose Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Jetpack Compose Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
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.
Изучай Kotlin с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 30
- Уроки
- 120
Часто задаваемые вопросы
Урок «Выделение переиспользуемых Composable» бесплатный?
Да — полный текст урока «Выделение переиспользуемых Composable» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Jetpack Compose Academy, подпишись на CoddyKit PRO. Курс Jetpack Compose Academy содержит 4 уроков всего.
Чему я научусь в уроке «Выделение переиспользуемых Composable»?
Переработайте экран в понятные компоненты. Ты практикуешь Jetpack Compose Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Jetpack Compose Academy?
Предыдущий опыт не требуется. Jetpack Compose Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Выделение переиспользуемых Composable»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Jetpack Compose Academy?
Да. Каждый урок Jetpack Compose Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Эскиз компоновки карточки профиля
- Аватар, имя и раздел биографии
- Строка статистики и кнопка подписки
- Выделение переиспользуемых Composable