@Composable: bu nədir, Compose annotasiyası və tətbiq sahəsi

Jetpack Compose-da @Composable nədir

@Composable — Kotlin dilinin annotasiyasıdır, funksiyanı Jetpack Compose çərçivəsində istifadəçi interfeysini təsvir etmək üçün nəzərdə tutulduğunu qeyd edir. Kotlin kompilyatoru bu annotasiya ilə qarşılaşdıqda, funksiyanın kompozisiya kontekstində — UI ağacını idarəetmə sistemində işləməsinə imkan verən əlavə kod yaradır.

@Composable annotasiyası Google tərəfindən 2021-ci ildə Jetpack Compose 1.0-ın ilk stabil versiyası ilə təqdim edildi. Ondan əvvəl Android üçün interfeyslərin hazırlanması yalnız XML işarətləri və View sistemi vasitəsilə aparılırdı. @Composable yanaşmanı köklü şəkildə dəyişdi: ayrı işarətləmə faylında UI təsvir etmək əvəzinə, proqramçı interfeysi birbaşa Kotlin-də yazır.

@Composable ilə adi Kotlin funksiyaları arasındakı əsas fərq — vəziyyət dəyişikliklərini oxumaq və onlara reaksiya vermək qabiliyyəti. Composable funksiyasının oxuduğu dəyişən dəyərini dəyişdikdə, sistem avtomatik olaraq həmin funksiyanın yenidən işə salınmasını (rekompozisiya) planlaşdırır. Bu, proqramçını findViewById və setText vasitəsilə UI-ni əl ilə yeniləməkdən azad edir.

@Composable daxili mexanikası slot konsepsiyasına — kompozisiya tərkibində hər bir funksiya üçün ayrılan xüsusi yaddaş sahəsinə əsaslanır. Bu slotda funksiyaya ötürülən dəyərlər, həmçinin sonrakı çağırışlarda müqayisə üçün zəruri olan xidməti məlumatlar saxlanılır.

Composable funksiyasını necə elan etməli

Composable funksiyası elan etmək üçün fun açar sözündən əvvəl @Composable annotasiyasını əlavə etmək kifayətdir. Funksiya androidx.compose.runtime-dən annotasiyanı idxal edən paketdə yerləşməlidir. Funksiya adının böyük hərflə yazılması tövsiyə olunur — bu, Compose icmasında qəbul edilmiş ümumi konvensiyadır və UI komponentlərini adi funksiyalardan vizual olaraq fərqləndirir.

import androidx.compose.runtime.Composable

@Composable
fun Greeting(name: String) {
    var count by remember { mutableStateOf(0) }
    Column {
        Text("Salam, $name!")
        Button(onClick = { count++ }) {
            Text("$count dəfə klikləndi")
        }
    }
}

Composable funksiyasının parametrləri istənilən ola bilər — primitiv tiplər, sətrlər, lambdalar və hətta Slot API vasitəsilə ötürülən digər Composable funksiyaları. Rekompozisiya zamanı yan təsirlərdən qaçmaq üçün parametrlərin dəyişməz (val) edilməsi tövsiyə olunur. Bütün dəyişən məlumatlar Compose vəziyyət mexanizmləri vasitəsilə idarə edilməlidir.

Composable funksiyaları adi funksiyalar kimi ixtiyari dəyər qaytara bilməz — onların yeganə vəzifəsi UI ağacının bir hissəsini qurmaq və ya yeniləməkdir. Bununla belə, State Hoisting kimi xüsusi nümunələr mövcuddur ki, burada Compose funksiyası vəziyyət və callback-ləri parametrlər vasitəsilə qəbul edir, təmiz və təkrar istifadə oluna bilən qalır.

Kotlin-də Composable funksiyalarının qaydaları

Compose sistemi Composable funksiyalarının necə görünməli və davranmalı olduğuna dair bir neçə ciddi məhdudiyyət qoyur. Birinci qayda: Composable funksiyası yalnız digər Composable funksiyaları və ya yan təsiri olmayan adi funksiyaları çağıra bilər. Bu, kompozisiyanın proqnozlaşdırıla bilməsini və Compose optimizasiyalarının düzgün işləməsini təmin edir.

İkinci qayda icra sırasına aiddir. Compose Composable funksiyalarını istənilən ardıcıllıqla çağırmaq hüququna malikdir, buna görə də belə funksiyanın gövdəsindəki kod qonşu funksiyaların çağırılma ardıcıllığına etibar etməməlidir. Hər bir Composable funksiyası UI ağacındakı öz mövqeyi səviyyəsində özünü təmin edən olmalıdır.

Üçüncü qayda — Composable funksiyasının gövdəsində yan təsirlərin qadağan olması. Verilənlər bazasına yazmaq, şəbək sorğuları göndərmək və ya xarici dəyişənləri dəyişdirmək kimi əməliyyatlar yalnız LaunchedEffect, DisposableEffect və ya SideEffect kimi xüsusi effektlər daxilində yerinə yetirilməlidir. Bu qaydanın pozulması rekompozisiyalar zamanı proqnozlaşdırılmayan davranışa səbəb olur.

Dördüncü qayda: Composable funksiyaları idempotent olmalıdır. Eyni arqumentlərlə təkrar çağırış eyni UI-ni yaratmalıdır. Bu tələb, Compose-un giriş məlumatları dəyişməyən funksiyaların yenidən çəkilməsini atladığı skipping optimizasiyasının düzgün işləməsi üçün zəruridir.

// Düzgün: yan təsiri olmayan təmiz Composable funksiyası
@Composable
fun UserCard(user: User, onClick: () -> Unit) {
    Card(modifier = Modifier.clickable { onClick() }) {
        Text(text = user.name)
    }
}

// Səhv: gövdə daxilində yan təsir
@Composable
fun WrongCard(userId: String) {
    // val result = viewModel.loadUser(userId)  // İCAZƏ VERİLMİR
    Text("Yüklənir...")
}

@Composable istifadə nümunələri

@Composable annotasiyasından istifadə edərək profil ekranı yaratmağın praktiki nümunəsini nəzərdən keçirək. Burada bir neçə Composable funksiyasının birləşdirilməsini, vəziyyətlə işləməyi və modifikatorları — istənilən Compose düzümünün əsas elementlərini nümayiş etdiririk.

@Composable
fun ProfileScreen(userId: String) {
    var isFollowed by remember { mutableStateOf(false) }

    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        ProfileHeader(userId = userId)
        Spacer(modifier = Modifier.height(16.dp))
        StatsRow(posts = 42, followers = 1280)
        Spacer(modifier = Modifier.height(24.dp))
        FollowButton(
            isFollowed = isFollowed,
            onToggle = { isFollowed = !isFollowed }
        )
    }
}

@Composable
fun ProfileHeader(userId: String) {
    Row(verticalAlignment = Alignment.CenterVertically) {
        AsyncImage(model = "https://example.com/avatars/$userId",
            contentDescription = "User avatar")
        Spacer(modifier = Modifier.width(12.dp))
        Text(text = "İstifadəçi #$userId", style = MaterialTheme.typography.headlineMedium)
    }
}

@Composable
fun StatsRow(posts: Int, followers: Int) {
    Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
        StatItem("Posts", posts)
        StatItem("Followers", followers)
    }
}

@Composable
fun StatItem(label: String, value: Int) {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text(text = "$value", style = MaterialTheme.typography.headlineSmall)
        Text(text = label, style = MaterialTheme.typography.bodySmall)
    }
}

Nümunədə hər bir Composable funksiyası ekranın öz hissəsinə cavabdehdir: ProfileScreen ümumi vəziyyəti və uşaq funksiyaların kompozisiyasını idarə edir, ProfileHeader avatar və adı göstərir, StatsRow isə statistika blokunu. Bu yanaşma vahid məsuliyyət prinsipinə əməl edir və komponentlərin təkrar istifadəsini asanlaşdırır.

Composable funksiyalarının növləri və təyinatı

Jetpack Compose-da Composable funksiyalarının üç əsas növü var. Birinci növ — konteynerlər (Row, Column, Box, LazyColumn), uşaq elementlərin yerləşməsini müyən edir. İkinci — göstərim elementləri (Text, Image, Icon, Button), konkret UI komponentlərini render edir. Üçüncü — daxili komponentləri təkrar istifadə olunan bloklarda birləşdirən fərdi Composable funksiyaları.

Konteynerlər adi elementlərdən onunla fərqlənir ki, onlar content lambdasını — @Composable () -> Unit tipli son parametri qəbul edir. Məhz bu mexanizm iç-içə UI ağacları qurmağa imkan verir: hər bir konteyner öz konteksti və yaddaş sahəsi ilə uşaq kompozisiya yaradır.

Fərdi Composable funksiyaları iki alt növə bölünür: ağıllı (smart) və axmaq (dumb). Ağıllı funksiyalar vəziyyət və məntiqi idarə edir — onlar remember, LaunchedEffect və digər Compose API-lərinin çağırışlarını ehtiva edir. Axmaq funksiyalar bütün məlumatları parametrlər vasitəsilə qəbul edir və yalnız onları göstərir. Ağıllı və axmaq komponentlərə bölgü test edilmə qabiliyyətini və kodun təkrar istifadəsini yaxşılaşdırır.

@Composable və komponentlərin təkrar istifadəsi

@Composable annotasiyasının əsas üstünlüyü — miras və mürəkkəb sinif iyerarxiyaları olmadan təkrar istifadə olunan UI komponentləri yaratmaq imkanıdır. View sistemindən fərqli olaraq, burada hər bir fərdi element konstruktorları olan Java sinfi yaratmağı tələb edirdi, Composable komponenti sadəcə parametrləri olan Kotlin funksiyasıdır.

Təkrar istifadəni təmin etmək üçün Slot API nümunəsi tətbiq olunur, burada Composable funksiyası öz düzümünün müxtəlif sahələri üçün content lambdalarını qəbul edir. Məsələn, Card komponenti başlıq, gövdə və aşağı hissə üçün ayrıca content qəbul edə bilər ki, bu da onu tətbiqin istənilən ekranları üçün universal edir.

Modifikatorlar (Modifier) təkrar istifadədə əsas rol oynayır: onlar komponentin özünü dəyişdirmədən boşluqları, ölçüləri, klikləri və animasiyaları tənzimləməyə imkan verir. Modifier-i hər bir fərdi Composable funksiyasına standart dəyərlə parametr kimi ötürmək tövsiyə olunur: Modifier = Modifier — bu, Google-ın rəsmi kitabxanalarında qəbul edilmiş standart təcrübədir.

@Composable
fun SectionCard(
    modifier: Modifier = Modifier,
    title: String,
    content: @Composable () -> Unit
) {
    Card(modifier = modifier) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(text = title, style = MaterialTheme.typography.titleMedium)
            Spacer(modifier = Modifier.height(8.dp))
            content()
        }
    }
}

Slot API sayəsində SectionCard komponenti müxtəlif məzmunla — formalar, siyahılar, mətn blokları ilə müxtəlif ekranlarda istifadə oluna bilər. Modifikatorların və Slot API-nin birləşməsi Compose komponentlərini Kotlin-in təmin etdiyi tip təhlükəsizliyini itirmədən maksimum çevik edir.