Jetpack Compose в мобилната разработка: какво е, основни понятия и как работи

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

@Composable — анотация, която превръща функция в Composable. Composable функциите са градивни блокове на UI. Те не връщат View, а излъчват елементи в Composition. Composition — UI дърво, изградено от извиквания на Composable функции. Compose сравнява новото дърво със старото и актуализира само променените части.

Recomposition

Recomposition — рестарт на Composable функции при промяна на състоянието. Compose проследява кои състояния се четат във всяка функция. Когато състояние се промени, Compose рестартира само функциите, които четат това състояние (Smart Recomposition). Рекомпозицията е оптимистична: може да се изпълни няколко пъти, така че функциите трябва да са чисти (без странични ефекти). Страничните ефекти отиват в 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 препоръчва наблюдение на стабилността на типовете — нестабилните типове причиняват прекомерна рекомпозиция.

CompositionLocal

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

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

remember — запазва стойност между рекомпозициите. mutableStateOf — създава наблюдаемо състояние (MutableState<T>). При промяна задейства рекомпозиция. State Hoisting — модел: състоянието се повдига в родителския компонент, детето получава стойност + обратно извикване. State (непроменяем) — само четене. MutableState — четене + запис. rememberSaveable — остава при завъртане/смърт на процеса.

State Hoisting

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

Производно състояние

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

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

Column — вертикално оформление (аналогично на LinearLayout вертикално). Row — хоризонтално оформление. Box — наслагващо оформление (аналогично на FrameLayout). LazyColumn — вертикален списък с превъртане и отложено зареждане. LazyRow — хоризонтален списък с превъртане. Scaffold — основна структура на екрана: TopAppBar, BottomBar, FloatingActionButton, Snackbar. TopAppBar — горна лента. BottomNavigation — долна навигация (NavigationBar в Material 3). Modifier — верига: .fillMaxWidth().padding(8.dp).clickable { }. Редът на модификаторите е важен — всеки създава нова обвивка.

Оптимизация на LazyColumn

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

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

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

Разширена навигация

Множество обратни стекове — отделен обратен стек за всеки раздел на BottomNavigation. SavedStateHandle — запазване на аргументи при смърт на процеса. NavArgs — типобезопасни аргументи (Kotlin 2.0+). Дълбоки връзки — URL схеми за външни връзки. Предсказващ жест назад (Android 14+) — поддръжка на жест назад с преглед. IT Sectr препоръчва използването на NavArgs за типова безопасност и множество обратни стекове за BottomNavigation.

Ефекти (LaunchedEffect, DisposableEffect)

LaunchedEffect — стартира suspend блок в Composition. Отменя се при напускане на Composition. Рестартира се при промяна на keys. Използва се за: зареждане на данни, таймери, анимации. DisposableEffect — за ресурси, изискващи почистване: onDispose { } — отписване от слушатели, затваряне на връзки. SideEffect — синхронен ефект (всяка рекомпозиция). Използва се за: регистриране, синхронизация с не-Compose код. IT Sectr препоръчва LaunchedEffect за зареждане на данни и DisposableEffect за почистване.

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

Модели на ефекти

rememberCoroutineScope — достъп до CoroutineScope извън LaunchedEffect (напр. при кликване на бутон). snapshotFlow — преобразуване на State в Flow за вериги. produceState — преобразуване на не-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 дърво за достъпност и тестове. IdlingResource — изчакване на асинхронни операции. Тестове с екранни снимки — Papercuts, Roborazzi. IT Sectr препоръчва UI тестове за всеки екран и единични тестове за ViewModel.

WindowSizeClass — адаптиране към размер на екрана (Compact, Medium, Expanded). Свързано с адаптивните оформления на Material3. Използва се в Adaptive Navigation Suite за автоматично превключване от BottomNavigation на NavigationRail. IT Sectr препоръчва WindowSizeClass за адаптиране на Compose за таблети и настолни компютри.

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