Android Academy · Урок

Что такое Composable

Функции, описывающие интерфейс.

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

Что такое компонуемая функция

В Jetpack Compose экраны создаются с помощью функций, а не путём раздувания XML-макетов. Компонуемая функция — это обычная функция Kotlin, описывающая часть пользовательского интерфейса.

Такая функция помечается аннотацией @Composable. Это сообщает компилятору Compose, что функция может создавать элементы интерфейса и вызывать другие компонуемые функции.

Аннотация @Composable

Добавление @Composable перед функцией открывает возможности Compose. Внутри неё можно вызывать другие компонуемые функции, например Text или Column.

По соглашению имена компонуемых функций начинаются с прописной буквы, как и имена классов. Благодаря этому функции интерфейса легко заметить в коде.

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

Интерфейс описывается на Kotlin

Компонуемая функция не возвращает объект View. Вместо этого она создаёт интерфейс как побочный эффект во время выполнения Compose. Вы просто описываете, что должно появиться на экране.

Это называется декларативным стилем: Вы указываете, как должен выглядеть интерфейс при текущих данных, а Compose сам решает, как его отрисовать.

@Composable
fun WelcomeMessage() {
    Text("Welcome back!")
}

Компонуемые функции вызывают компонуемые функции

Настоящая сила заключается во вложенности. Компонуемая функция может вызывать другие компонуемые функции, позволяя создавать сложные экраны из небольших повторно используемых частей.

Здесь родительская компонуемая функция вызывает дочернюю. Compose выполняет их сверху вниз и размещает созданные элементы интерфейса.

@Composable
fun Header() {
    Text("My App")
}

@Composable
fun Screen() {
    Header()
}

Функции без возвращаемых значений

Большинство компонуемых функций возвращают Unit, то есть не возвращают полезного значения. Их задача — создавать интерфейс, а не передавать значение обратно.

Поэтому Вы вызываете компонуемую функцию ради её влияния на экран, а не для сохранения результата. Это отличается от обычных функций, но быстро становится привычным.

@Composable
fun Footer() {
    Text("\u00A9 2024 CoddyKit")
}

Передача данных в параметрах

Компонуемые функции могут принимать параметры, как обычные функции Kotlin. Благодаря этому одна и та же компонуемая функция может отображать разные данные.

Здесь Greeting принимает name и отображает его. Передача данных делает компонуемые функции гибкими и пригодными для повторного использования в приложении.

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

Повторное использование компонуемой функции

Поскольку компонуемые функции являются функциями, одну из них можно вызывать много раз с разными аргументами. Каждый вызов создаёт собственную копию интерфейса.

Так Вы избегаете повторения кода: создаёте интерфейс один раз, а затем используете его везде, где это необходимо.

@Composable
fun NameList() {
    Greeting("Ada")
    Greeting("Linus")
}

Где находятся компонуемые функции

Компонуемые функции размещаются внутри действия Android с помощью setContent. Этот блок является точкой входа, где Compose берёт экран под свой контроль.

Внутри setContent Вы вызываете компонуемую функцию верхнего уровня, и всё созданное ею становится интерфейсом приложения.

setContent {
    Greeting("World")
}

Основы рекомпозиции

Когда изменяются данные, которые читает компонуемая функция, Compose повторно запускает её, чтобы обновить экран. Такой повторный запуск называется рекомпозицией.

Вам не нужно обновлять интерфейс вручную. Вы изменяете данные, а Compose автоматически выполняет рекомпозицию затронутых компонуемых функций. Благодаря этому экран остаётся синхронизированным с состоянием.

Делайте компонуемые функции небольшими

Полезно, чтобы каждая компонуемая функция выполняла одну понятную задачу. Небольшие целенаправленные функции проще читать, тестировать и повторно использовать.

Если функция становится слишком большой, разделите её на несколько небольших компонуемых функций и вызывайте их вместе. В будущем Вы себе за это604 будете благодарны.

@Composable
fun ProfileHeader(name: String) {
    Text(name)
}

Импорты, которые Вы встретите

Компонуемые функции предоставляются библиотеками Compose. Часто импортируют androidx.compose.runtime.Composable для аннотации и androidx.compose.material3.Text для работы с текстом.

Android Studio обычно добавляет эти импорты автоматически. Знание их источника поможет, если какой-либо импорт отсутствует.

import androidx.compose.runtime.Composable
import androidx.compose.material3.Text

Быстрая проверка

Давайте повторим, что делает функцию компонуемой.

Краткое повторение

Вы узнали, что компонуемая функция — это функция Kotlin, помеченная @Composable и декларативно описывающая интерфейс. Компонуемые функции могут принимать параметры и вызывать другие компонуемые функции, а их имена начинаются с прописной буквы.

Они возвращают Unit и создают интерфейс вместо возврата значения. При изменении данных Compose выполняет их рекомпозицию и обновляет экран. Далее Вы выведете настоящий текст и расположите представления в столбец с помощью Column.

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

Урок «Что такое Composable» бесплатный?

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

Чему я научусь в уроке «Что такое Composable»?

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

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

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

Сколько времени занимает урок «Что такое Composable»?

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

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

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

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

← Назад к Android Academy