Mobil ishlab chiqishda Jetpack Compose: bu nima, asosiy tushunchalar va qanday ishlaydi

Jetpack Compose asoslari (@Composable, Composition, Recomposition)

@Composable — funksiyani Composable ga aylantiruvchi annotatsiya. Composable funksiyalar UI qurilish bloklaridir. Ular View qaytarmaydi, balki Composition ga elementlarni chiqaradi. Composition — Composable funksiya chaqiruvlaridan qurilgan UI daraxti. Compose yangi daraxtni eski bilan solishtiradi va faqat o'zgargan qismlarni yangilaydi.

Recomposition

Recomposition — holat o'zgarganda Composable funksiyalarining qayta ishga tushirilishi. Compose har bir funksiyada qaysi holatlar o'qilishini kuzatadi. Holat o'zgarganda, Compose faqat shu holatni o'qiyotgan funksiyalarni qayta ishga tushiradi (Smart Recomposition). Recomposition optimistik: bir necha marta ishlashi mumkin, shuning uchun funksiyalar toza bo'lishi kerak (yon ta'sirsiz). Yon ta'sirlar LaunchedEffect yoki DisposableEffect ga qo'yiladi. Composable funksiyalar suspend bo'lishi mumkin emas. Ular boshqa Composable funksiyalardan chaqiriladi. Chaqiruv tartibi kafolatlanmagan (Compose qayta tartiblashi mumkin).

// State Hoisting va LazyColumn bilan Composable namunasi
@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 daraxt. Recomposition — aqlli qayta ishga tushirish. IT Sectr tur barqarorligini kuzatishni tavsiya qiladi — barqaror bo'lmagan turlar haddan tashqari qayta kompozitsiyaga sabab bo'ladi.

CompositionLocal

CompositionLocal — Compose-da yashirin ma'lumot uzatish. SwiftUI-dagi @Environment ga o'xshash. CompositionLocalProvider — qiymat o'rnatish. current — o'qish. Buning uchun ishlatiladi: Theme (MaterialTheme), ContentScale, Density. Statik CompositionLocal — o'zgarishsiz konfiguratsiya uchun. Dinamik CompositionLocal — o'zgaruvchan qiymatlar (mavzular) uchun. IT Sectr global konfiguratsiyalar uchun CompositionLocal va ma'lumotlar uchun aniq parametrlardan foydalanishni tavsiya qiladi.

Holat (remember, mutableStateOf, State Hoisting)

remember — qayta kompozitsiyalar orasida qiymatni saqlaydi. mutableStateOf — kuzatiladigan holat yaratadi (MutableState<T>). O'zgarganda, qayta kompozitsiyani tetiklaydi. State Hoisting — namuna: holat ota-ona komponentiga ko'tariladi, bola qiymat + qayta chaqiruv oladi. State (o'zgarmas) — faqat o'qish. MutableState — o'qish + yozish. rememberSaveable — aylantirish/protsess o'limida saqlanadi.

State Hoisting

State Hoisting — prinsip: state down, events up. Holat ota-onada saqlanadi va parametrlar orqali bola komponentlariga uzatiladi. Bola komponentlar o'zgarishlarni lambda (qayta chaqiruv) orqali xabar qiladi. Afzalliklari: qayta foydalanish, test qilish, yagona haqiqat manbai. Misol: MyTextField o'z holatini saqlash o'rniga, ota-ona satrni saqlaydi va uni value + onValueChange orqali uzatadi.

Hosil holat

derivedStateOf — hisoblangan holat, faqat bog'liqliklar o'zgarganda qayta hisoblanadi. Filtrlash, konvertatsiya, tekshirish uchun ishlatiladi. snapshotFlow — State ni Flow ga aylantiradi. Reaktiv zanjirlar uchun ishlatiladi. collectAsState — Composable ichida Flow ni State da to'playdi. IT Sectr hisoblangan qiymatlar uchun derivedStateOf va State ni korutinlar bilan bog'lash uchun snapshotFlow dan foydalanishni tavsiya qiladi.

Konteynerlar (Column, Row, Box, LazyColumn)

Column — vertikal tartib (LinearLayout vertikalga o'xshash). Row — gorizontal tartib. Box — stacking tartib (FrameLayout ga o'xshash). LazyColumn — dangasa yuklash bilan vertikal aylantiriladigan ro'yxat. LazyRow — gorizontal aylantiriladigan ro'yxat. Scaffold — asosiy ekran tuzilmasi: TopAppBar, BottomBar, FloatingActionButton, Snackbar. TopAppBar — yuqori panel. BottomNavigation — pastki navigatsiya (Material 3 da NavigationBar). Modifier — zanjir: .fillMaxWidth().padding(8.dp).clickable { }. Modifikatorlar tartibi muhim — har biri yangi o'rash yaratadi.

LazyColumn optimallashtirish

LazyColumn — virtuallashtirilgan ro'yxat. Faqat ko'rinadigan elementlarni ko'rsatadi. Optimallashtirish: 1) key — element uchun noyob kalit, 2) contentType — elementlarni tur bo'yicha guruhlash, 3) itemContent — element ichida qayta kompozitsiyani minimallashtirish, 4) LazyVerticalGrid / LazyHorizontalGrid — panjaralar uchun. LazyLayout — maxsus dangasa tartib. Paging 3 + Compose — collectAsLazyPagingItems orqali sahifalash. IT Sectr bashorat qilinadigan qayta kompozitsiya uchun barcha LazyColumn larda key(item) ishlatishni tavsiya qiladi.

Navigatsiya (NavController, NavHost)

Navigation Compose — navigatsiya kutubxonasi. NavController — manzil stekini boshqaradi. NavHost — navigatsiya grafi uchun konteyner. composable("route") — manzilni ro'yxatdan o'tkazish. navController.navigate("route") — navigatsiya. popBackStack() — qaytish. Argumentlar: composable("detail/{id}", arguments = listOf(navArgument("id") { type = NavType.StringType })). intentFilter orqali chuqur havolalar. BottomNavigation — NavController bilan integratsiya: NavBarItem → navigate + popUpTo.

Ilg'or navigatsiya

Bir nechta orqa steklar — har bir BottomNavigation yorlig'i uchun alohida orqa stek. SavedStateHandle — protsess o'limida argumentlarni saqlash. NavArgs — tip xavfsiz argumentlar (Kotlin 2.0+). Chuqur havolalar — tashqi havolalar uchun URL sxemalari. Bashoratli orqa jesti (Android 14+) — oldindan ko'rish bilan orqa jestni qo'llab-quvvatlash. IT Sectr tip xavfsizligi uchun NavArgs va BottomNavigation uchun bir nechta orqa steklardan foydalanishni tavsiya qiladi.

Effektlar (LaunchedEffect, DisposableEffect)

LaunchedEffect — Composition da suspend blokni ishga tushiradi. Composition dan chiqishda bekor qilinadi. keys o'zgarganda qayta ishga tushadi. Buning uchun ishlatiladi: ma'lumot yuklash, taymerlar, animatsiyalar. DisposableEffect — tozalash talab qiladigan resurslar uchun: onDispose { } — tinglovchilardan obunani bekor qilish, ulanishlarni yopish. SideEffect — sinxron effekt (har bir qayta kompozitsiyada). Buning uchun ishlatiladi: qayd etish, Compose bo'lmagan kod bilan sinxronlash. IT Sectr ma'lumot yuklash uchun LaunchedEffect va tozalash uchun DisposableEffect ishlatishni tavsiya qiladi.

Compose — funksiya + modifikator. SwiftUI — struct + modifikator. Tushunchalar o'xshash, sintaksis farq qiladi. IT Sectr ikkala freymvorkni o'rganishni tavsiya qiladi — birini tushunish ikkinchisini o'rganishni osonlashtiradi.

Effekt namunalari

rememberCoroutineScope — LaunchedEffect tashqarisida CoroutineScope ga kirish (masalan, tugma bosilganda). snapshotFlow — zanjirlar uchun State ni Flow ga aylantirish. produceState — Compose bo'lmagan manbani State ga aylantirish. animateFloatAsState va animateColorAsState — effektlar orqali animatsiyalar. IT Sectr UI hodisalari uchun rememberCoroutineScope va avtomatik yuklash uchun LaunchedEffect ishlatishni tavsiya qiladi.

Mavzulashtirish (MaterialTheme, Material3)

MaterialTheme — Compose ning global mavzusi. Ranglar, tipografiya, shakllar. MaterialTheme { } — butun ilovani o'raydi. Material3 (M3) — Google dizayn tizimi 2023+. Dynamic Colors — fon rasmlariga moslashish (Android 12+). TextStyle — matn konfiguratsiyasi: fontSize, fontWeight, lineHeight. Shape — burchaklarni yumaloqlash. Elevation — soyalar. IT Sectr standart sifatida Material3 va zamonaviy qurilmalar uchun Dynamic Colors ishlatishni tavsiya qiladi.

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

Animatsiyalar (animate*, AnimatedVisibility)

animateFloatAsState — Float qiymatini animatsiya qiladi. animateColorAsState — rangni animatsiya qiladi. animateDpAsState — o'lchamni animatsiya qiladi. AnimatedVisibility — .animateEnterExit() bilan ko'rsatish/yashirish. AnimatedContent — tarkib o'zgarganda animatsiya (crossfade, slide). updateTransition — enum holatiga asoslangan animatsiya. Animatable — Animatable interfeysi orqali maxsus animatsiya. IT Sectr ro'yxatlar uchun AnimatedVisibility va ekran o'tishlari uchun AnimatedContent ishlatishni tavsiya qiladi.

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

Testlash (Compose UI Test)

Compose UI Test — Compose ekranlarini testlash. createComposeRule() — JUnit qoidasi. setContent { } — Composable o'rnatish. onNodeWithText, onNodeWithTag, onNodeWithContentDescription — elementlarni topish. performClick, performTextInput, performScrollTo — harakatlar. assertIsDisplayed, assertTextEquals — tasdiqlar. Semantics — foydalanish qulayligi va testlar uchun Semantics daraxti. IdlingResource — asinxron operatsiyalarni kutish. Skrinshot testlari — Papercuts, Roborazzi. IT Sectr har bir ekran uchun UI testlari va ViewModel uchun birlik testlarini tavsiya qiladi.

WindowSizeClass — ekran o'lchamiga moslashish (Compact, Medium, Expanded). Material3 sezgir tartiblari bilan bog'liq. Adaptive Navigation Suite da BottomNavigation dan NavigationRail ga avtomatik o'tish uchun ishlatiladi. IT Sectr planshet va ish stoli Compose moslashuvi uchun WindowSizeClass ishlatishni tavsiya qiladi.

Paging 3 + Compose — Google dan sahifalash kutubxonasi. PagingData — sahifa oqimi. PagingConfig — sozlamalar (pageSize, prefetchDistance). collectAsLazyPagingItems() — Compose da to'plash. PagingSource — maxsus manba. RemoteMediator — gibrid yuklash (tarmoq + MB). Paging 3 Compose da cheksiz aylantirish ro'yxatlari uchun standartdir.