Mobil inkişafda Jetpack Compose: nədir, əsas anlayışlar və necə işləyir

Jetpack Compose Əsasları (@Composable, Composition, Recomposition)

@Composable — funksiyanı Composable-ə çevirən annotasiya. Composable funksiyalar UI qurucu bloklarıdır. Onlar View qaytarmır, Composition-a elementlər göndərir. Composition — Composable funksiya çağırışlarından qurulan UI ağacı. Compose yeni ağacı köhnə ilə müqayisə edir və yalnız dəyişmiş hissələri yeniləyir.

Recomposition

Recomposition — vəziyyət dəyişdikdə Composable funksiyalarının yenidən başladılması. Compose hər funksiyada hansı vəziyyətlərin oxunduğunu izləyir. Vəziyyət dəyişdikdə, Compose yalnız bu vəziyyəti oxuyan funksiyaları yenidən başladır (Smart Recomposition). Recomposition optimistdir: bir neçə dəfə işləyə bilər, buna görə funksiyalar təmiz olmalıdır (yan təsirsiz). Yan təsirlər LaunchedEffect və ya DisposableEffect-ə qoyulur. Composable funksiyalar suspend ola bilməz. Onlar digər Composable funksiyalardan çağırılır. Çağırış sırası təmin olunmur (Compose yenidən sıralaya bilər).

// State Hoisting və LazyColumn ilə Composable nümunəsi
@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 — deklarativ ağac. Recomposition — ağıllı yenidən başlatma. IT Sectr tip sabitliyini izləməyi tövsiyə edir — qeyri-sabit tiplər həddindən artıq yenidən kompozisiyaya səbəb olur.

CompositionLocal

CompositionLocal — Compose-da gizli məlumat ötürmə. SwiftUI-də @Environment-ə bənzəyir. CompositionLocalProvider — dəyər təyin etmək. current — oxumaq. Bunlar üçün istifadə olunur: Theme (MaterialTheme), ContentScale, Density. Statik CompositionLocal — dəyişiklik olmadan konfiqurasiya üçün. Dinamik CompositionLocal — dəyişən dəyərlər (tema) üçün. IT Sectr qlobal konfiqurasiyalar üçün CompositionLocal və məlumat üçün aşkar parametrlər istifadə etməyi tövsiyə edir.

Vəziyyət (remember, mutableStateOf, State Hoisting)

remember — yenidən kompozisiya arasında dəyəri qoruyur. mutableStateOf — müşahidə oluna bilən vəziyyət yaradır (MutableState<T>). Dəyişdikdə, yenidən kompozisiyanı tetikler. State Hoisting — nümunə: vəziyyət valideyn komponentinə qaldırılır, uşaq dəyər + geri çağırış alır. State (dəyişməz) — yalnız oxumaq. MutableState — oxumaq + yazmaq. rememberSaveable — döndürmə/prosesin ölümü zamanı qalıcı olur.

State Hoisting

State Hoisting — prinsip: state down, events up. Vəziyyət valideyndə saxlanılır və parametrlər vasitəsilə uşaq komponentlərinə ötürülür. Uşaq komponentlər dəyişiklikləri lambda (geri çağırış) vasitəsilə bildirir. Faydaları: təkrar istifadə, test edilə bilmə, tək həqiqət mənbəyi. Nümunə: MyTextField öz vəziyyətini saxlamaq əvəzinə, valideyn sətri saxlayır və onu value + onValueChange vasitəsilə ötürür.

Törəmə Vəziyyət

derivedStateOf — hesablanmış vəziyyət, yalnız asılılıqlar dəyişdikdə yenidən hesablanır. Filtrləmə, çevirmə, doğrulama üçün istifadə olunur. snapshotFlow — State-i Flow-a çevirir. Reaktiv zəncirlər üçün istifadə olunur. collectAsState — Composable daxilində Flow-u State-də toplayır. IT Sectr hesablanmış dəyərlər üçün derivedStateOf və State-i koroutinlərə bağlamaq üçün snapshotFlow istifadə etməyi tövsiyə edir.

Konteynerlər (Column, Row, Box, LazyColumn)

Column — şaquli düzən (LinearLayout şaquli bənzəri). Row — üfüqi düzən. Box — yığma düzən (FrameLayout bənzəri). LazyColumn — tənbəl yükləmə ilə şaquli sürüşdürülə bilən siyahı. LazyRow — üfüqi sürüşdürülə bilən siyahı. Scaffold — əsas ekran quruluşu: TopAppBar, BottomBar, FloatingActionButton, Snackbar. TopAppBar — yuxarı panel. BottomNavigation — aşağı naviqasiya (Material 3-də NavigationBar). Modifier — zəncir: .fillMaxWidth().padding(8.dp).clickable { }. Modifier sırası önəmlidir — hər biri yeni sarğı yaradır.

LazyColumn Optimizasiyası

LazyColumn — virtual siyahı. Yalnız görünən elementləri göstərir. Optimizasiya: 1) key — element üçün unikal açar, 2) contentType — elementləri növə görə qruplaşdırma, 3) itemContent — element daxilində yenidən kompozisiyanı minimuma endirmə, 4) LazyVerticalGrid / LazyHorizontalGrid — şəbəkələr üçün. LazyLayout — fərdi tənbəl düzən. Paging 3 + Compose — collectAsLazyPagingItems vasitəsilə səhifələmə. IT Sectr proqnozlaşdırıla bilən yenidən kompozisiya üçün bütün LazyColumn-lərdə key(item) istifadə etməyi tövsiyə edir.

Naviqasiya (NavController, NavHost)

Navigation Compose — naviqasiya kitabxanası. NavController — təyinat yığınını idarə edir. NavHost — naviqasiya qrafiki üçün konteyner. composable("route") — təyinat qeydiyyatı. navController.navigate("route") — naviqasiya. popBackStack() — geri qayıtma. Arqumentlər: composable("detail/{id}", arguments = listOf(navArgument("id") { type = NavType.StringType })). intentFilter vasitəsilə dərin keçidlər. BottomNavigation — NavController ilə inteqrasiya: NavBarItem → navigate + popUpTo.

Qabaqcıl Naviqasiya

Çoxsaylı geri yığınları — hər BottomNavigation nişanı üçün ayrıca geri yığını. SavedStateHandle — prosesin ölümü zamanı arqumentləri qoruma. NavArgs — tip təhlükəsiz arqumentlər (Kotlin 2.0+). Dərin keçidlər — xarici keçidlər üçün URL sxemləri. Proqnozlaşdırıcı geri jesti (Android 14+) — ön izləmə ilə geri jest dəstəyi. IT Sectr tip təhlükəsizliyi üçün NavArgs və BottomNavigation üçün çoxsaylı geri yığınları istifadə etməyi tövsiyə edir.

Effektlər (LaunchedEffect, DisposableEffect)

LaunchedEffect — Composition-da suspend bloku işə salır. Composition-dan çıxanda ləğv edilir. keys dəyişdikdə yenidən başladılır. Bunlar üçün istifadə olunur: məlumat yükləmə, taymerlər, animasiyalar. DisposableEffect — təmizlənmə tələb edən resurslar üçün: onDispose { } — dinləyicilərdən abunəni ləğv etmə, bağlantıları bağlama. SideEffect — sinxron effekt (hər yenidən kompozisiyada). Bunlar üçün istifadə olunur: qeydiyyat, qeyri-Compose kodu ilə sinxronizasiya. IT Sectr məlumat yükləmə üçün LaunchedEffect və təmizlənmə üçün DisposableEffect istifadə etməyi tövsiyə edir.

Compose — funksiya + modifier. SwiftUI — struct + modifier. Anlayışlar oxşar, sintaksis fərqlidir. IT Sectr hər iki framework-ü öyrənməyi tövsiyə edir — birini başa düşmək digərini öyrənməyi asanlaşdırır.

Effekt nümunələri

rememberCoroutineScope — LaunchedEffect xaricində CoroutineScope-a giriş (məsələn, düymə klikində). snapshotFlow — zəncirlər üçün State-i Flow-a çevirmək. produceState — qeyri-Compose mənbəyini State-ə çevirmək. animateFloatAsState və animateColorAsState — effektlər vasitəsilə animasiyalar. IT Sectr UI hadisələri üçün rememberCoroutineScope və avtomatik yükləmə üçün LaunchedEffect istifadə etməyi tövsiyə edir.

Tema (MaterialTheme, Material3)

MaterialTheme — Compose-un qlobal teması. Rənglər, tipoqrafiya, formalar. MaterialTheme { } — bütün tətbiqi sarır. Material3 (M3) — Google dizayn sistemi 2023+. Dynamic Colors — divar kağızına uyğunlaşma (Android 12+). TextStyle — mətn konfiqurasiyası: fontSize, fontWeight, lineHeight. Shape — künclərin yuvarlaqlaşdırılması. Elevation — kölgələr. IT Sectr standart olaraq Material3 və müasir cihazlar üçün Dynamic Colors istifadə etməyi tövsiyə edir.

@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() }
}

Animasiyalar (animate*, AnimatedVisibility)

animateFloatAsState — Float dəyərini animasiya edir. animateColorAsState — rəngi animasiya edir. animateDpAsState — ölçünü animasiya edir. AnimatedVisibility — .animateEnterExit() ilə göstər/gizlət. AnimatedContent — məzmun dəyişdikdə animasiya (crossfade, slide). updateTransition — enum vəziyyətinə əsaslanan animasiya. Animatable — Animatable interfeysi vasitəsilə fərdi animasiya. IT Sectr siyahılar üçün AnimatedVisibility və ekran keçidləri üçün AnimatedContent istifadə etməyi tövsiyə edir.

@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()
        )
    }
}

Test (Compose UI Test)

Compose UI Test — Compose ekranlarının testi. createComposeRule() — JUnit qaydası. setContent { } — Composable təyin etmə. onNodeWithText, onNodeWithTag, onNodeWithContentDescription — elementləri tapma. performClick, performTextInput, performScrollTo — hərəkətlər. assertIsDisplayed, assertTextEquals — iddialar. Semantics — əlçatanlıq və testlər üçün Semantics ağacı. IdlingResource — asinxron əməliyyatları gözləmə. Ekran görüntüsü testləri — Papercuts, Roborazzi. IT Sectr hər ekran üçün UI testləri və ViewModel üçün vahid testlər tövsiyə edir.

WindowSizeClass — ekran ölçüsünə uyğunlaşma (Compact, Medium, Expanded). Material3 cavabdeh düzenləri ilə əlaqəli. Adaptive Navigation Suite-də BottomNavigation-dan NavigationRail-ə avtomatik keçid üçün istifadə olunur. IT Sectr planşet və masaüstü Compose uyğunlaşması üçün WindowSizeClass istifadə etməyi tövsiyə edir.

Paging 3 + Compose — Google-dan səhifələmə kitabxanası. PagingData — səhifə axını. PagingConfig — ayarlar (pageSize, prefetchDistance). collectAsLazyPagingItems() — Compose-da toplama. PagingSource — fərdi mənbə. RemoteMediator — hibrid yükləmə (şəbəkə + DB). Paging 3 Compose-da sonsuz sürüşdürmə siyahıları üçün standartdır.