Первая @Composable-функция и превью

Учимся писать composable-функцию, помечать её аннотацией и видеть результат в превью без запуска эмулятора.

@Composable — аннотация, которая превращает обычную Kotlin-функцию в строительный блок интерфейса Compose.

Анатомия composable-функции

Composable-функция выглядит как обычная функция, но помечена аннотацией @Composable. По соглашению её имя пишут с большой буквы, как имя класса, и она ничего не возвращает (Unit) — вместо этого она «излучает» элементы UI:

@Composable
fun WelcomeCard(userName: String) {
    Column {
        Text(text = "Добро пожаловать")
        Text(text = userName)
    }
}

Внутри composable можно вызывать только другие composable-функции (Column, Text). Это правило проверяет компилятор: вызвать Text(...) из обычной функции не получится.

Превью без запуска

Главное удобство Compose — аннотация @Preview. Она показывает, как выглядит composable, прямо в панели Android Studio, без сборки и эмулятора:

@Preview(showBackground = true)
@Composable
fun WelcomeCardPreview() {
    WelcomeCard(userName = "Аня")
}

Превью — это тоже composable, но он не попадает в приложение. Его задача — дать данные для отрисовки в дизайнере. Можно сделать несколько превью с разными параметрами и увидеть все состояния экрана сразу.

ASCII-макет результата

+---------------------------+
| Добро пожаловать          |
| Аня                       |
+---------------------------+

Как работает под капотом

Аннотация @Composable — не просто маркер. Компилятор Compose добавляет в каждую такую функцию скрытый параметр — объект Composer. Через него функция «записывает» свои элементы в дерево композиции и понимает, нужно ли её перевыполнять. Поэтому вызвать composable можно только из другого composable: только там есть этот скрытый Composer.

Превью движок запускает изолированно: он подставляет ваши тестовые параметры и рисует результат, не трогая остальное приложение.

Частые ошибки

Забыть аннотацию @Composable — функция перестанет быть строительным блоком, и вызов Text внутри даст ошибку компиляции.
Назвать composable с маленькой буквы — компилируется, но нарушает соглашение; читателям труднее отличить UI-функцию от обычной.
Передавать в @Preview-функцию реальные данные из сети — превью должно быть самодостаточным, с заранее заданными значениями.

Итог

@Composable превращает функцию в кирпичик UI; имя пишут с большой буквы.
Внутри composable вызывают только другие composable.
@Preview рисует UI в Android Studio без запуска приложения и удобен для проверки разных состояний.