Android Academy · Урок

Ваш первый компонуемый элемент

Создайте и просмотрите компонуемую функцию

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

Ваша первая компонуемая функция

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

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

Аннотация @Composable

Аннотация @Composable сообщает компилятору, что функция может создавать пользовательский интерфейс и вызывать другие компонуемые функции. Без неё нельзя вызывать Text, Button и другие функции интерфейса.

Соглашение об именовании

Компонуемые функции, создающие интерфейс, получают имена в виде существительных PascalCase, например Greeting или ProfileCard, — как классы. Это показывает, что функция «рисует что-то», а не «возвращает значение».

Параметры управляют интерфейсом

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

@Composable
fun Greeting(name: String) {
    Text(text = "Welcome, $name")
}
// Greeting("Sam") and Greeting("Mia") render different text

Вызов компонуемых функций

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

@Composable
fun WelcomeScreen() {
    Greeting(name = "Ada")
    Greeting(name = "Grace")
}

Размещение с помощью setContent

Чтобы фактически отобразить компонуемые функции, Activity вызывает setContent { } в onCreate. Лямбда-выражение является корнем интерфейса Compose.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            WelcomeScreen()
        }
    }
}

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

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

Параметры по умолчанию

Значения параметров Kotlin по умолчанию отлично подходят для этого. Задайте параметру значение по умолчанию, чтобы вызывающий код мог его не указывать.

@Composable
fun Greeting(name: String = "Guest") {
    Text(text = "Hello, $name!")
}
// Greeting() shows "Hello, Guest!"

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

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

Делайте их небольшими

Хорошие компонуемые функции небольшие и сосредоточенные. Одна функция должна описывать одну логическую часть интерфейса. Собирайте большие экраны, объединяя небольшие компонуемые функции.

Собираем всё вместе

Перед вами полностью готовая первая компонуемая функция, подключённая к Activity. При запуске на устройстве она показывает «Hello, Compose!».

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting(name = "Compose")
        }
    }
}

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

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

Что позволяет функции делать аннотация @Composable?

Итоги

Вы написали свою первую компонуемую функцию. Запомните:

Помечайте функции интерфейса аннотацией @Composable.
Используйте имена в формате PascalCase.
Параметры — это входные данные, определяющие интерфейс.
setContent { } размещает компонуемые функции в Activity.

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

Урок «Ваш первый компонуемый элемент» бесплатный?

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

Чему я научусь в уроке «Ваш первый компонуемый элемент»?

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

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

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

Сколько времени занимает урок «Ваш первый компонуемый элемент»?

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

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

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

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

← Назад к Android Academy