Jetpack Compose Academy · Урок

Анатомия функции @Composable

Научитесь читать Composable и понимать, что делает его особенным.

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

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

What Is a Composable?

A Composable is just a Kotlin function that describes a piece of UI. Call it, and Compose draws that UI on screen. It is the building block of everything. 🧱

The @Composable Annotation

The magic marker is @Composable above the function. It tells the Compose compiler this function can emit UI and may be recomposed when data changes.

@Composable
fun Greeting() {
    Text("Hello!")
}

Name It Like a UI Piece

By convention, Composable names use PascalCase nouns like Greeting or ProfileCard, not verbs. The name describes the thing on screen, not an action.

It Returns Unit

A Composable usually returns nothing (Unit). Instead of returning UI, it emits it by calling other Composables inside its body. The side effect is the drawing.

Built-In Composables

Compose ships ready-made Composables like Text, Button, Image, and Icon. You combine these to build your own, so you rarely start from a blank canvas.

@Composable
fun Welcome() {
    Text("Welcome to Compose")
}

Parameters Pass In Data

Composables take parameters just like any function. Pass data in, and the UI reflects it. This is how the same component shows different content.

@Composable
fun Greeting(name: String) {
    Text("Hello, " + name)
}

The Modifier Parameter

Most Composables accept a modifier to control size, padding, and layout. By convention it is the first optional parameter, ready for you to customize.

Composables Call Composables

A Composable can only be called from another Composable. This rule lets Compose track the tree of UI and recompose the right parts when state changes.

Keep Them Small

Aim for small, focused Composables that do one thing. Tiny pieces are easier to reuse, preview, and combine into bigger screens later on.

Prefer No Side Effects

A good Composable is predictable: same inputs, same UI. Avoid surprises like network calls in the body, since Compose may run it many times.

Compose Builds a Tree

As Composables call each other, they form a UI tree. Compose walks this tree to draw the screen and to update only the branches that changed.

Quick Check

Let's verify what marks a function as a UI builder.

Recap: The Composable

A Composable is a Kotlin function with @Composable that emits UI, takes parameters, accepts a modifier, and calls other Composables to build a tree.

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

Урок «Анатомия функции @Composable» бесплатный?

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

Чему я научусь в уроке «Анатомия функции @Composable»?

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

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

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

Сколько времени занимает урок «Анатомия функции @Composable»?

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

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

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

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

← Назад к Jetpack Compose Academy