0Pricing
Jetpack Compose Academy · Урок

Написание функции @Composable

Определите собственную переиспользуемую функцию пользовательского интерфейса.

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

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

What You Will Build

In this lesson you will write your own Composable from scratch. By the end, you can describe a piece of UI with a single Kotlin function. 🚀

It Starts With @Composable

A Composable is just a function marked with the @Composable annotation. That tag tells Compose this function emits UI instead of returning a value.

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

Name It Like a Type

Composables that emit UI use PascalCase names, like a class. So you write Greeting, not greeting, to signal it is a UI building block.

They Return Unit

Your Composable does not return a value. It emits UI by calling other Composables inside it, so its return type is simply Unit.

@Composable
fun Welcome() {
    Text("Welcome aboard")
}

Pass Data With Parameters

Make a Composable reusable by adding parameters. Pass in a name and the same function can greet anyone you like.

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

Default Values Help

Give parameters defaults so callers can skip them. Here name defaults to World, so Greeting() still works on its own.

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

Built-in Composables

You rarely start from nothing. Compose ships ready-made pieces like Text, Button, and Image that you call from inside your own function.

Import What You Use

When you call Text, Android Studio adds an import for androidx.compose.material3.Text. Let the IDE auto-import so you never guess the package.

Keep Functions Small

Each Composable should describe one clear thing. A small focused function is easier to read, reuse, and preview than a giant one.

No Return, Just Calls

Inside a Composable you do not build and return a widget. You simply call other Composables top to bottom, and Compose draws them in order.

@Composable
fun Card() {
    Text("Title")
    Text("Subtitle")
}

It Is Still Kotlin

A Composable is normal Kotlin underneath. You can use variables, conditions, and loops inside it just like any other function.

@Composable
fun Status(online: Boolean) {
    if (online) Text("Online")
    else Text("Offline")
}

Quick Check

Time for a quick check on what defines a Composable.

Recap

You can now write a Composable: tag it with @Composable, name it in PascalCase, take parameters, and call other Composables to emit UI. 🎉

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

Урок «Написание функции @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 структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

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

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

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

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

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

  1. Написание функции @Composable
  2. Предварительный просмотр в реальном времени с @Preview
  3. Вызов Composable из Composable
  4. setContent: с чего начинается ваш интерфейс
← Назад к Jetpack Compose Academy