Jetpack Compose: əsaslar, Composable funksiyaları və State

Jetpack Compose nədir?

Jetpack Compose — reaktiv proqramlaşdırma prinsipləri üzərində qurulmuş Google UI framework-ü. Activity XML düzeni, FragmentManager və ViewBinding əvəzinə, developer interfeysi @Composable annotasiyası ilə Kotlin funksiyaları vasitəsilə təsvir edir. Compose LayoutInflater-dən istifadə etmir — UI bayt koduna kompilyasiya olunan təmiz Kotlin funksiyalarıdır. Framework bir neçə kitabxanadan ibarətdir: Compose UI (əsas komponentlər Text, Button, Column, Row), Compose Foundation (Material Design, Jestlər, Focus), Compose Material3 (Dynamic Colors ilə Material You) və Compose Runtime (State, Side Effects, Coroutines). Compose Android API 21+ (Android 5.0) üzərində işləyir və ComposeView — AndroidView adapteri vasitəsilə mövcud View/XML kodu ilə tam uyğundur.

Compose vs View System

View System (2008) əl ilə idarə olunan View obyektləri iyerarxiyasından istifadə edir: developer XML düzəni yaradır, findViewById vasitəsilə View tapır, RecyclerView üçün Adapter tətbiq edir və məlumat dəyişdikdə notifyDataSetChanged çağırır. Compose UI-ni funksional təsvir edir: vəziyyət dəyişdikdə framework yalnız dəyişmiş Composable funksiyalarını yenidən işə salır (recompose), diff hesablayır və Canvas-a minimal dəyişikliklər tətbiq edir. Compose-un performansı View System ilə müqayisə oluna bilər, mürəkkəb siyahılar (LazyColumn) ssenarilərində isə key parametri vasitəsilə lazımsız elementləri atlayaraq RecyclerView-i tez-tez üstələyir. IT Sectr-də Compose minSdk 24+ olan Android tətbiqlərinin yeni modullarında istifadə olunur.

Composable funksiyaları: UI-nin tikinti blokları

@Composable — adi Kotlin funksiyasını UI tikinti blokuna çevirən annotasiya. Composable funksiyaları digər Composable funksiyalarını çağıra bilər, komponentlər ağacı əmələ gətirir. View-dən fərqli olaraq, Composable funksiyaları standart olaraq vəziyyətə malik deyil — onlar stateless-dir və giriş parametrləri və ya State hər dəyişdikdə yenidən çəkilir. Compiler (Compose Compiler) @Composable funksiyalarını dayandırıla və bərpa oluna bilən koda çevirir (positional memoization) — bu, Compose-a ağacı tamamilə yenidən qurmadan yalnız dəyişmiş hissələri yenidən başlatmağa imkan verir.

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 funksiyası name və avatarUrl parametrlərini qəbul edir, avatar və ad ilə sətir qurur. Modifier.fillMaxWidth() komponenti tam genişliyə uzadır, .padding(16.dp) boşluqlar əlavə edir. MaterialTheme.typography.titleMedium Material 3 sistem stilindən istifadə edir. name və ya avatarUrl parametrləri dəyişdikdə Compose UserProfile-i yenidən başladır — komponentin yeni dəyərlərlə təkrar yaradılması.

Jetpack Compose-da State və Recomposition

State Compose-da — dəyişməsi asılı @Composable funksiyalarının rekompozisiyasına (yenidən başlamasına) səbəb olan istənilən dəyərdir. Əsas üsul — Compose snapshot sistemini dəstəkləyən MutableState<T> yaradan mutableStateOf()-dir. Snapshot — dəyişiklikləri izləmə mexanizmi: State-ə yazarkən Compose cari Snapshot-ı dirty olaraq qeyd edir və rekompozisiya planlayıcısı yalnız bu State-i oxuyan Composable funksiyalarını yenidən başladır. Observable kolleksiyalar üçün mutableStateListOf() və mutableStateMapOf() istifadə edin. Compose Kotlin Flow üçün collectAsState() və LiveData üçün observeAsState() vasitəsilə Lifecycle-Aware komponentlərdən State dəstəkləyir.

@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) və count (Int) vəziyyəti ilə mutableStateOf() vasitəsilə saxlanılan «Like» düyməsi yaradır. Basıldıqda liked tərsinə çevrilir, sayğac artır/azalır — Compose avtomatik LikeButton-i yenidən başladır. by delegate State-dən adi dəyişən kimi istifadə etməyə imkan verir: liked.value = !liked.value əvəzinə liked = !liked. Düymənin rəngi primary (bəyənilib) və surfaceVariant (bəyənilməyib) arasında reaktiv dəyişir.

remember: rekompozisiyalar arasında keşləmə

remember — dəyəri rekompozisiyalar arasında keşləyən Compose funksiyası. remember olmadan Composable funksiyasının hər yenidən başlaması yeni vəziyyət (mutableStateOf) yaradır — bu tətbiqin məntiqini pozur: ekran döndərildikdə və ya valideyn State dəyişdikdə sayğac sıfırlanacaq. remember kalkulyator-lambda qəbul edir və dəyəri yalnız ilk kompozisiyada hesablayır; sonrakılarda keşlənmiş nəticəni qaytarır. Keşi sıfırlamaq üçün remember(key) istifadə edin — açar dəyərin nə vaxt yenidən hesablanacağını müəyyən edir. remember(key1, key2) hər hansı açar dəyişdikdə yenidən hesablayır. Uzunömürlü vəziyyətlər (ekran döndərilməsindən sağ çıxan) üçün rememberSaveable istifadə edin — SavedStateHandle vasitəsilə Bundle-da saxlanılan remember analoqu.

@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 = "Keçən vaxt: ${seconds}s",
            style = MaterialTheme.typography.displayMedium
        )
    }
}

rememberSaveable ekran döndərildikdə (konfiqurasiya dəyişikliyi) seconds-i qoruyur. LaunchedEffect hər saniyə seconds-i artıran korutin işə salır. TimerScreen rekompozisiyasında (hər saniyə) seconds rememberSaveable sayəsində sıfırlanmır. Konfiqurasiya dəyişikliklərindən sağ çıxmamalı olan vəziyyət üçün (məsələn, animasiya bayraqları) adi remember istifadə edin.

Modifier: Composable ayarlar zənciri

Modifier — Composable komponentlərinin görünüşünü, davranışını və düzənini tənzimləmək üçün Builder nümunəsini tətbiq edən dəyişməz konteyner-obyektdir. Modifier metodunun hər çağırışı (.padding(), .width(), .clickable(), .background()) əlavə edilmiş elementlə yeni Modifier qaytarır. Modifikatorların sırası önəm daşıyır: .padding(16.dp).clickable { } — boşluq klik işləyicisindən əvvəl tətbiq olunur, clickable boşluq nəzərə alınmaqla bütün sahəni izləyir. .clickable { }.padding(16.dp) — klik üçün boşluqdan əvvəlki bütün sahə, boşluq məzmunu içəriyə sürüşdürür. Modifier then(otherModifier) vasitəsilə xüsusi tətbiqləri və valideyn ayarlarına giriş üçün compositionLocal-ı dəstəkləyir.

@Composable
fun CardExample() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .clickable { println("Karta klikləndi") },
        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 və Modifier ilə Android üçün Deklarativ UI",
                style = MaterialTheme.typography.bodyMedium
            )
        }
    }
}

CardExample Modifier zəncirini nümayiş etdirir: fillMaxWidth + padding + clickable. Card — öz elevation və colors ayarları ilə Material3 komponenti. İç-içə Column daxili padding 16dp-ə malikdir. Compose Material3 Android 12+-da rəngləri avtomatik Dynamic Color (Material You) uyğunlaşdırır. Card Compose-da 30+ daxili Material3 komponentindən biridir.

State hoisting və Compose arxitekturası

State hoisting — vəziyyətin Composable funksiyasından onu çağırana qaldırılması nümunəsi, funksiyanı stateless edir. Stateless komponent parametrlər vasitəsilə məlumat və callback-lər qəbul edir, öz State-inə sahib deyil. Bu təkrar istifadəni və test edilməni artırır: komponent müxtəlif State ilə çağırıla və preview-də yoxlana bilər. Google arxitekturanı tövsiyə edir: ViewModel + StateFlow (və ya MutableStateFlow) + Compose-da collectAsState(). ViewModel vəziyyəti ekran səviyyəsinə qaldırır, Compose göstərir. Yan təsirlər (LaunchedEffect, DisposableEffect) birdəfəlik hadisələri idarə edir.