Jetpack Compose в мобильной разработке: что это, ключевые понятия и как работает

Основы Jetpack Compose (@Composable, Composition, Recomposition)

@Composable — аннотация, превращающая функцию в Composable. Composable функции — строительные блоки UI. Они не возвращают View, а emit'ят элементы в Composition. Composition — дерево UI, построенное из вызовов Composable функций. Compose сравнивает новое дерево со старым и обновляет только изменившиеся части.

Recomposition

Recomposition — перезапуск Composable функций при изменении состояния. Compose отслеживает, какие state читаются в каждой функции. При изменении state Compose перезапускает только те функции, которые читают этот state (Smart Recomposition). Recomposition — optimistic: может запуститься несколько раз, поэтому функции должны быть чистыми (без side effects). Side effects — в LaunchedEffect или DisposableEffect. Composable функции не могут быть suspend. Они вызываются из других Composable функций. Порядок вызова не гарантирован (Compose может переупорядочивать).

// Пример Composable с State Hoisting и LazyColumn
@Composable
fun ItemList(
    items: List<String>,
    onItemClick: (String) -> Unit
) {
    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ) {
        items(items) { item ->
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .clickable { onItemClick(item) }
                    .padding(8.dp)
            ) {
                Text(
                    text = item,
                    style = MaterialTheme.typography.bodyLarge
                )
            }
        }
    }
}

@Composable
fun MainScreen() {
    var text by remember { mutableStateOf("") }
    val items = listOf("Item 1", "Item 2", "Item 3")

    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Compose App") })
        }
    ) { padding ->
        ItemList(
            items = items,
            onItemClick = { selected -> text = selected }
        )
    }
}

Composition — декларативное дерево. Recomposition — умный перезапуск. IT Sectr рекомендует следить за стабильностью типов (stable) — unstable типы вызывают избыточную рекомпозицию.

CompositionLocal

CompositionLocal — неявная передача данных в Compose. Аналог @Environment в SwiftUI. CompositionLocalProvider — установка значения. current — чтение. Используется для: Theme (MaterialTheme), ContentScale, Density. Статические CompositionLocal — для конфигурации без изменений. Dynamic CompositionLocal — для изменяемых значений (темы). IT Sectr рекомендует использовать CompositionLocal для глобальных конфигураций и явные параметры для данных.

Состояние (remember, mutableStateOf, State Hoisting)

remember — сохраняет значение между рекомпозициями. mutableStateOf — создаёт наблюдаемое состояние (MutableState<T>). При изменении triggered рекомпозиция. State Hoisting — паттерн: состояние поднимается в родительский компонент, дочерний получает значение + callback. State (immutable) — только чтение. MutableState — чтение + запись. rememberSaveable — сохранение при rotation/process death.

State Hoisting

State Hoisting — принцип: state down, events up. Состояние хранится в родителе и передаётся в дочерние компоненты через параметры. Дочерние компоненты сообщают об изменениях через лямбды (callback). Преимущества: переиспользуемость, тестируемость, single source of truth. Пример: вместо того чтобы MyTextField хранил своё состояние, родитель хранит строку и передаёт её через value + onValueChange.

Derived State

derivedStateOf — вычисляемое состояние, пересчитывается только при изменении зависимостей. Используется для фильтрации, конвертации, валидации. snapshotFlow — конвертация State в Flow. Используется для реактивных цепочек. collectAsState — сбор Flow в State внутри Composable. IT Sectr рекомендует derivedStateOf для вычисляемых значений и snapshotFlow для связывания State с корутинами.

Контейнеры (Column, Row, Box, LazyColumn)

Column — вертикальный layout (аналог LinearLayout vertical). Row — горизонтальный layout. Box — стековый layout (аналог FrameLayout). LazyColumn — вертикальный scrollable список с lazy loading. LazyRow — горизонтальный. Scaffold — основной каркас экрана: TopAppBar, BottomBar, FloatingActionButton, Snackbar. TopAppBar — верхняя панель. BottomNavigation — нижняя навигация (NavigationBar в Material 3). Modifier — цепочка: .fillMaxWidth().padding(8.dp).clickable { }. Порядок модификаторов важен — каждый создаёт новый wrapper.

LazyColumn Optimization

LazyColumn — виртуализированный список. Рендерит только видимые элементы. Оптимизация: 1) key — уникальный ключ для item, 2) contentType — группировка item по типу, 3) itemContent — минимизация recomposition внутри item, 4) LazyVerticalGrid / LazyHorizontalGrid — для сеток. LazyLayout — кастомный lazy layout. Paging 3 + Compose — пагинация через collectAsLazyPagingItems. IT Sectr рекомендует key(item) для всех LazyColumn для предсказуемой рекомпозиции.

Навигация (NavController, NavHost)

Navigation Compose — библиотека для навигации. NavController — управление стеком destination'ов. NavHost — контейнер для графа навигации. composable("route") — регистрация destination. navController.navigate("route") — переход. popBackStack() — возврат. Аргументы: composable("detail/{id}", arguments = listOf(navArgument("id") { type = NavType.StringType })). Deep linking через intentFilter. BottomNavigation — интеграция с NavController: NavBarItem → navigate + popUpTo.

Продвинутая навигация

Multiple back stacks — отдельные back stack для каждой вкладки BottomNavigation. SavedStateHandle — сохранение аргументов при process death. NavArgs — типобезопасные аргументы (Kotlin 2.0+). Deep links — URL-схемы для внешних ссылок. Predictive back gesture (Android 14+) — поддержка жеста назад с предпросмотром. IT Sectr рекомендует использовать NavArgs для типобезопасности и multiple back stacks для BottomNavigation.

Эффекты (LaunchedEffect, DisposableEffect)

LaunchedEffect — запуск suspend-блока в Composition. Отменяется при выходе из Composition. Перезапускается при изменении keys. Используется для: загрузки данных, таймеров, анимаций. DisposableEffect — для ресурсов, требующих cleanup: onDispose { } — отписка от listener'ов, закрытие соединений. SideEffect — синхронный эффект (каждый рекомпозицию). Используется для: логирования, синхронизации с non-Compose кодом. IT Sectr рекомендует LaunchedEffect для загрузки данных и DisposableEffect для cleanup.

Compose — функция + модификатор. SwiftUI — struct + модификатор. Концепции похожи, синтаксис разный. IT Sectr рекомендует изучать оба фреймворка — понимание одного облегчает изучение другого.

Effect patterns

rememberCoroutineScope — доступ к CoroutineScope вне LaunchedEffect (например, при нажатии кнопки). snapshotFlow — конвертация State в Flow для цепочек. produceState — конвертация non-Compose источника в State. animateFloatAsState и animateColorAsState — анимации через эффекты. IT Sectr рекомендует rememberCoroutineScope для событий UI и LaunchedEffect для автоматической загрузки.

Темизация (MaterialTheme, Material3)

MaterialTheme — глобальная тема Compose. Цвета, типографика, формы. MaterialTheme { } — обёртка всего приложения. Material3 (M3) — дизайн-система Google 2023+. Dynamic Colors — адаптация под обои (Android 12+). TextStyle — конфигурация текста: fontSize, fontWeight, lineHeight. Shape — скругления. Elevation — тени. IT Sectr рекомендует Material3 по умолчанию и Dynamic Colors для современных устройств.

@Composable
fun AppTheme(content: @Composable () -> Unit) {
    val colorScheme = if (isSystemInDarkTheme()) {
        darkColorScheme(
            primary = Color(0xFFBB86FC),
            secondary = Color(0xFF03DAC6)
        )
    } else {
        lightColorScheme(
            primary = Color(0xFF6200EE),
            secondary = Color(0xFF03DAC6)
        )
    }
    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography(
            bodyLarge = TextStyle(fontSize = 16.sp)
        )
    ) { content() }
}

Анимации (animate*, AnimatedVisibility)

animateFloatAsState — анимация Float значения. animateColorAsState — анимация цвета. animateDpAsState — анимация размера. AnimatedVisibility — появление/исчезновение с .animateEnterExit(). AnimatedContent — анимация при смене контента (crossfade, slide). updateTransition — анимация на основе enum состояния. Animatable — кастомная анимация через Animatable интерфейс. IT Sectr рекомендует AnimatedVisibility для списков и AnimatedContent для смены экранов.

@Composable
fun AnimatedCounter(count: Int) {
    val animatedCount by animateFloatAsState(
        targetValue = count.toFloat(),
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessLow
        )
    )

    AnimatedContent(targetState = count) { targetCount ->
        Text(
            text = "$targetCount",
            style = MaterialTheme.typography.displayLarge,
            modifier = Modifier.animateContentSize()
        )
    }
}

Тестирование (Compose UI Test)

Compose UI Test — тестирование Compose-экранов. createComposeRule() — правило JUnit. setContent { } — установка Composable. onNodeWithText, onNodeWithTag, onNodeWithContentDescription — поиск элементов. performClick, performTextInput, performScrollTo — действия. assertIsDisplayed, assertTextEquals — проверки. Semantics — дерево Semantics для accessibility и тестов. IdlingResource — ожидание асинхронных операций. Screenshot tests — Papercuts, Roborazzi. IT Sectr рекомендует UI тесты для каждого экрана и Unit тесты для ViewModel.

WindowSizeClass — адаптация под размер экрана (Compact, Medium, Expanded). Связан с Material3 responsive layouts. Используется в Adaptive Navigation Suite для автоматической смены BottomNavigation на NavigationRail. IT Sectr рекомендует WindowSizeClass для планшетной и десктопной адаптации Compose приложений.

Paging 3 + Compose — библиотека пагинации от Google. PagingData — поток страниц. PagingConfig — настройки (pageSize, prefetchDistance). collectAsLazyPagingItems() — сбор в Compose. PagingSource — кастомный источник. RemoteMediator — гибридная загрузка (сеть + БД). Paging 3 — стандарт для списков с бесконечной прокруткой в Compose.