Jetpack Compose: основы, Composable функции и State

Что такое Jetpack Compose?

Jetpack Compose — UI-фреймворк Google, построенный на принципах реактивного программирования. Вместо Activity с XML-разметкой, FragmentManager, и ViewBinding разработчик описывает интерфейс через Kotlin-функции с аннотацией @Composable. Compose не использует LayoutInflater — UI — это чистые функции Kotlin, компилируемые в байткод. Фреймворк состоит из нескольких библиотек: Compose UI (базовые компоненты Text, Button, Column, Row), Compose Foundation (Material Design, Gestures, Focus), Compose Material3 (Material You с Dynamic Colors) и Compose Runtime (State, Side Effects, Coroutines). Compose работает на Android API 21+ (Android 5.0) и полностью совместим с существующим кодом на View/XML через ComposeView — AndroidView-адаптер.

Compose vs View System

View System (2008) использует иерархию View-объектов с ручным управлением: разработчик создаёт XML-макет, находит View через findViewById, реализует Adapter для RecyclerView и вызывает notifyDataSetChanged при изменении данных. Compose описывает UI функционально: при изменении состояния фреймворк перезапускает (recompose) только изменившиеся Composable-функции, вычисляет diff и применяет минимальные изменения к Canvas. Производительность Compose сопоставима с View System, а в сценариях со сложными списками (LazyColumn) часто превосходит RecyclerView благодаря пропуску лишних элементов через key-параметр. В IT Sectr Compose используется для новых модулей Android-приложений с minSdk 24+.

Composable функции: строительные блоки UI

@Composable — аннотация, превращающая обычную Kotlin-функцию в строительный блок UI. Composable-функции могут вызывать другие Composable-функции, образуя дерево компонентов. В отличие от View, Composable-функции не имеют состояния по умолчанию — они stateless и перерисовываются при каждом изменении входных параметров или State. Компоновщик (Compose Compiler) трансформирует @Composable-функции в код, который может быть прерван и возобновлён (positional memoization) — это позволяет Compose перезапускать только изменившиеся части без полного перестроения дерева.

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun UserProfile(name: String, avatarUrl: String) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        AsyncImage(
            model = avatarUrl,
            contentDescription = "User avatar",
            modifier = Modifier.size(48.dp)
        )
        Spacer(modifier = Modifier.width(12.dp))
        Text(
            text = name,
            style = MaterialTheme.typography.titleMedium
        )
    }
}

Функция UserProfile принимает name и avatarUrl как параметры, строит строку с аватаром и именем. Modifier.fillMaxWidth() растягивает компонент на всю ширину, .padding(16.dp) добавляет отступы. MaterialTheme.typography.titleMedium использует системный стиль Material 3. При изменении параметров name или avatarUrl Compose перезапускает UserProfile — повторное создание компонента с новыми значениями.

State и Recomposition в Jetpack Compose

State в Compose — это любое значение, изменение которого вызывает рекомпозицию (перезапуск) зависимых @Composable-функций. Базовый способ — mutableStateOf(), создающий MutableState<T> с поддержкой snapshot-системы Compose. Snapshot — механизм отслеживания изменений: при записи в State Compose помечает текущий Snapshot как dirty, и планировщик рекомпозиции перезапускает только Composable-функции, читающие этот State. Для observable-коллекций используйте mutableStateListOf() и mutableStateMapOf(). Compose поддерживает State из Lifecycle-Aware компонентов через collectAsState() для Kotlin Flow и observeAsState() для LiveData.

@Composable
fun LikeButton() {
    var liked by remember { mutableStateOf(false) }
    var count by remember { mutableStateOf(42) }
    
    Button(
        onClick = {
            liked = !liked
            if (liked) count++ else count--
        },
        colors = ButtonDefaults.buttonColors(
            containerColor = if (liked) MaterialTheme.colorScheme.primary
                else MaterialTheme.colorScheme.surfaceVariant
        )
    ) {
        Text("♥ $count")
    }
}

Код создаёт кнопку «Like» с состоянием liked (Boolean) и count (Int), хранящимися через mutableStateOf(). При нажатии liked инвертируется, счётчик увеличивается/уменьшается — Compose автоматически перезапускает LikeButton. by delegate позволяет использовать State как обычную переменную: liked = !liked вместо liked.value = !liked.value. Цвет кнопки реактивно меняется между primary (лайкнуто) и surfaceVariant (не лайкнуто).

remember: кэширование между рекомпозициями

remember — функция Compose, кэширующая значение между рекомпозициями. Без remember каждый перезапуск Composable-функции создаёт новое состояние (mutableStateOf) — это ломает логику приложения: при повороте экрана или изменении родительского State счётчик сбросится. remember принимает лямбду-калькулятор и вычисляет значение только на первой композиции; на последующих возвращает кэшированный результат. Для сброса кэша используйте remember(key) — ключ определяет, когда пересчитать значение. remember(key1, key2) пересчитывает при изменении любого ключа. Для долгоживущих состояний (переживающих поворот экрана) используйте rememberSaveable — аналог remember с сохранением в Bundle через SavedStateHandle.

@Composable
fun TimerScreen() {
    var seconds by rememberSaveable { mutableStateOf(0) }
    
    LaunchedEffect(Unit) {
        while (true) {
            delay(1000)
            seconds++
        }
    }
    
    Column(
        modifier = Modifier.fillMaxSize().padding(32.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Elapsed: ${seconds}s",
            style = MaterialTheme.typography.displayMedium
        )
    }
}

rememberSaveable сохраняет seconds при повороте экрана (конфигурационное изменение). LaunchedEffect запускает корутину, инкрементирующую seconds каждую секунду. При рекомпозиции TimerScreen (каждую секунду) seconds не сбрасывается благодаря rememberSaveable. Используйте обычный remember для состояния, которое не должно переживать конфигурационные изменения (например, анимационные флаги).

Modifier: цепочка настроек Composable

Modifier — иммутабельный объект-контейнер, реализующий паттерн Builder для настройки внешнего вида, поведения и разметки Composable-компонентов. Каждый вызов метода Modifier (.padding(), .width(), .clickable(), .background()) возвращает новый Modifier с добавленным элементом. Порядок модификаторов имеет значение: .padding(16.dp).clickable { } — отступ применяется до обработчика клика, clickable отслеживает всю область с учётом отступа. .clickable { }.padding(16.dp) — кликабельна вся область до отступа, отступ смещает контент внутрь. Modifier поддерживает кастомные реализации через then(otherModifier) и compositionLocal для доступа к родительским настройкам.

@Composable
fun CardExample() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .clickable { println("Card clicked") },
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surfaceVariant
        )
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text("Jetpack Compose", style = MaterialTheme.typography.titleLarge)
            Spacer(modifier = Modifier.height(8.dp))
            Text(
                "Декларативный UI для Android с State и Modifier",
                style = MaterialTheme.typography.bodyMedium
            )
        }
    }
}

CardExample демонстрирует цепочку Modifier: fillMaxWidth + padding + clickable. Card — Material3-компонент с собственной настройкой elevation и colors. Вложенный Column имеет внутренний padding 16dp. Compose Material3 автоматически адаптирует цвета под Dynamic Color (Material You) на Android 12+. Card — один из 30+ встроенных Material3-компонентов в Compose.

State hoisting и архитектура Compose

State hoisting — паттерн подъёма состояния из Composable-функции в её caller, делающий функцию stateless. Stateless-компонент принимает данные и колбэки через параметры, не владея State самостоятельно. Это повышает переиспользуемость и тестируемость: компонент можно вызвать с разными State и проверить в preview. Google рекомендует архитектуру: ViewModel + StateFlow (или MutableStateFlow) + collectAsState() в Compose. ViewModel поднимает состояние на уровень экрана, Compose отображает. Side-эффекты (LaunchedEffect, DisposableEffect) обрабатывают одноразовые события.