Jetpack Compose: asoslar, Composable funksiyalari va State

Jetpack Compose nima?

Jetpack Compose — reaktiv dasturlash tamoyillari asosida qurilgan Google UI framework-i. Activity XML layout, FragmentManager va ViewBinding o'rniga, dasturchi interfeysni @Composable annotatsiyasi bilan Kotlin funksiyalari orqali tavsiflaydi. Compose LayoutInflater dan foydalanmaydi — UI bayt kodiga kompilyatsiya qilinadigan sof Kotlin funksiyalaridir. Framework bir nechta kutubxonadan iborat: Compose UI (asosiy komponentlar Text, Button, Column, Row), Compose Foundation (Material Design, Imo-ishoralar, Focus), Compose Material3 (Dynamic Colors bilan Material You) va Compose Runtime (State, Side Effects, Coroutines). Compose Android API 21+ (Android 5.0) da ishlaydi va ComposeView — AndroidView adapteri orqali mavjud View/XML kodi bilan to'liq mos keladi.

Compose vs View System

View System (2008) qo'lda boshqariladigan View obyektlari iyerarxiyasidan foydalanadi: dasturchi XML layout yaratadi, findViewById orqali View topadi, RecyclerView uchun Adapter implementatsiya qiladi va ma'lumotlar o'zgarganda notifyDataSetChanged ni chaqiradi. Compose UI ni funksional tavsiflaydi: holat o'zgarganda framework faqat o'zgargan Composable funksiyalarini qayta ishga tushiradi (recompose), diff hisoblaydi va Canvas ga minimal o'zgarishlarni qo'llaydi. Compose ning ishlashi View System bilan solishtirish mumkin, murakkab ro'yxatlar (LazyColumn) ssenariylarida esa key parametri orqali keraksiz elementlarni o'tkazib yuborib, RecyclView dan tez-tez ustun keladi. IT Sectr da Compose minSdk 24+ bo'lgan Android ilovalarining yangi modullarida qo'llaniladi.

Composable funksiyalari: UI qurilish bloklari

@Composable — oddiy Kotlin funksiyasini UI qurilish blokiga aylantiruvchi annotatsiya. Composable funksiyalari boshqa Composable funksiyalarini chaqirishi mumkin, komponentlar daraxtini hosil qiladi. View dan farqli o'laroq, Composable funksiyalari sukut bo'yicha holatga ega emas — ular stateless va kirish parametrlari yoki State har o'zgarganda qayta chiziladi. Kompilyator (Compose Compiler) @Composable funksiyalarini to'xtatilishi va tiklanishi mumkin bo'lgan kodga aylantiradi (positional memoization) — bu Compose ga daraxtni to'liq qayta qurmasdan faqat o'zgargan qismlarni qayta ishga tushirish imkonini beradi.

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 funksiyasi name va avatarUrl parametrlarini qabul qiladi, avatar va nom bilan qator quradi. Modifier.fillMaxWidth() komponentni to'liq kenglikka cho'zadi, .padding(16.dp) bo'shliqlar qo'shadi. MaterialTheme.typography.titleMedium Material 3 tizim uslubidan foydalanadi. name yoki avatarUrl parametrlari o'zgarganda Compose UserProfile ni qayta ishga tushiradi — komponentni yangi qiymatlar bilan qayta yaratish.

Jetpack Compose da State va Recomposition

State Compose da — o'zgarishi bog'liq @Composable funksiyalarining rekompozitsiyasiga (qayta ishga tushishiga) sabab bo'ladigan istalgan qiymat. Asosiy usul — Compose snapshot tizimini qo'llab-quvvatlovchi MutableState<T> yaratuvchi mutableStateOf() dir. Snapshot — o'zgarishlarni kuzatish mexanizmi: State ga yozishda Compose joriy Snapshot ni dirty deb belgilaydi va rekompozitsiya rejalashtiruvchisi faqat shu State ni o'qiyotgan Composable funksiyalarini qayta ishga tushiradi. Observable kolleksiyalar uchun mutableStateListOf() va mutableStateMapOf() dan foydalaning. Compose Kotlin Flow uchun collectAsState() va LiveData uchun observeAsState() orqali Lifecycle-Aware komponentlardan State ni qo'llab-quvvatlaydi.

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

Kod liked (Boolean) va count (Int) holati bilan mutableStateOf() orqali saqlanadigan «Like» tugmasini yaratadi. Bosilganda liked teskari o'giriladi, hisoblagich oshadi/kamayadi — Compose avtomatik LikeButton ni qayta ishga tushiradi. by delegate State dan oddiy o'zgaruvchi kabi foydalanish imkonini beradi: liked.value = !liked.value o'rniga liked = !liked. Tugma rangi primary (yoqtirilgan) va surfaceVariant (yoqtirilmagan) o'rtasida reaktiv o'zgaradi.

remember: rekompozitsiyalar o'rtasida keshlash

remember — qiymatni rekompozitsiyalar o'rtasida keshlovchi Compose funksiyasi. remember bo'lmasa Composable funksiyasining har bir qayta ishga tushishi yangi holat (mutableStateOf) yaratadi — bu ilova mantiqini buzadi: ekran aylantirilganda yoki ota-ona State o'zgarganda hisoblagich tiklanadi. remember kalkulyator-lambda qabul qiladi va qiymatni faqat birinchi kompozitsiyada hisoblaydi; keyingilarida keshlangan natijani qaytaradi. Keshni tiklash uchun remember(key) dan foydalaning — kalit qiymat qachon qayta hisoblanishini belgilaydi. remember(key1, key2) har qanday kalit o'zgarganda qayta hisoblaydi. Uzoq muddatli holatlar (ekran aylanishidan omon qoladigan) uchun rememberSaveable dan foydalaning — SavedStateHandle orqali Bundle da saqlanadigan remember analogi.

@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 = "O'tgan vaqt: ${seconds}s",
            style = MaterialTheme.typography.displayMedium
        )
    }
}

rememberSaveable ekran aylantirilganda (konfiguratsiya o'zgarishi) seconds ni saqlaydi. LaunchedEffect har soniyada seconds ni oshiruvchi korutin ishga tushiradi. TimerScreen rekompozitsiyasida (har soniyada) seconds rememberSaveable tufayli tiklanmaydi. Konfiguratsiya o'zgarishlaridan omon qolmasligi kerak bo'lgan holat uchun (masalan, animatsiya bayroqlari) oddiy remember dan foydalaning.

Modifier: Composable sozlamalar zanjiri

Modifier — Composable komponentlarining ko'rinishi, harakati va layout ini sozlash uchun Builder namunasini implementatsiya qiluvchi o'zgarmas konteyner-obyekt. Modifier metodining har bir chaqiruvi (.padding(), .width(), .clickable(), .background()) qo'shilgan element bilan yangi Modifier qaytaradi. Modifikatorlarning tartibi muhim: .padding(16.dp).clickable { } — bo'shliq bosish ishlov beruvchisidan oldin qo'llaniladi, clickable bo'shliqni hisobga olgan holda butun maydonni kuzatadi. .clickable { }.padding(16.dp) — bosish uchun bo'shliqdan oldingi butun maydon, bo'shliq tarkibni ichkariga siljitadi. Modifier then(otherModifier) orqali maxsus implementatsiyalarni va ota-ona sozlamalariga kirish uchun compositionLocal ni qo'llab-quvvatlaydi.

@Composable
fun CardExample() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .clickable { println("Karta bosildi") },
        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(
                "State va Modifier bilan Android uchun Deklarativ UI",
                style = MaterialTheme.typography.bodyMedium
            )
        }
    }
}

CardExample Modifier zanjirini namoyish etadi: fillMaxWidth + padding + clickable. Card — o'zining elevation va colors sozlamalari bilan Material3 komponenti. Ichma-ich Column ichki padding 16dp ga ega. Compose Material3 Android 12+ da ranglarni avtomatik Dynamic Color (Material You) ga moslashtiradi. Card Compose dagi 30+ o'rnatilgan Material3 komponentlaridan biridir.

State hoisting va Compose arxitekturasi

State hoisting — holatni Composable funksiyasidan uni chaqiruvchiga ko'tarish namunasi, funksiyani stateless qiladi. Stateless komponent parametrlar orqali ma'lumotlar va callback larni qabul qiladi, o'z State iga ega emas. Bu qayta foydalanish va test qilish imkoniyatini oshiradi: komponentni turli State lar bilan chaqirish va preview da tekshirish mumkin. Google arxitekturani tavsiya qiladi: ViewModel + StateFlow (yoki MutableStateFlow) + Compose da collectAsState(). ViewModel holatni ekran darajasiga ko'taradi, Compose ko'rsatadi. Yon ta'sirlar (LaunchedEffect, DisposableEffect) bir martalik hodisalarni boshqaradi.