@Composable: bu nima, Compose annotatsiyasi va qo'llanish sohasi

Jetpack Compose da @Composable nima

@Composable — Kotlin tilining annotatsiyasi bo'lib, funksiyani Jetpack Compose freymvorkida foydalanuvchi interfeysini tasvirlash uchun mo'ljallanganligini belgilaydi. Kotlin kompilyatori ushbu annotatsiyani uchratganda, funksiyaning kompozitsiya kontekstida — UI daraxtini boshqarish tizimida ishlashiga imkon beruvchi qo'shimcha kod yaratadi.

@Composable annotatsiyasi Google tomonidan 2021 yilda Jetpack Compose 1.0 ning birinchi barqaror versiyasi bilan taqdim etilgan. Undan oldin Android uchun interfeyslarni ishlab chiqish faqat XML belgilari va View tizimi orqali amalga oshirilar edi. @Composable yondashuvni tubdan o'zgartirdi: UI ni alohida belgilash faylida tasvirlash o'rniga, dasturchi interfeysni to'g'ridan-to'g'ri Kotlin da yozadi.

@Composable ning oddiy Kotlin funksiyalaridan asosiy farqi — holat o'zgarishlarini o'qish va ularga reaksiya berish qobiliyati. Composable funksiyasi o'qiyotgan o'zgaruvchi qiymatini o'zgartirganda, tizim avtomatik ravishda ushbu funksiyaning qayta ishga tushirilishini (rekompozitsiya) rejalashtiradi. Bu dasturchini findViewById va setText orqali UI ni qo'lda yangilashdan ozod qiladi.

@Composable ning ichki mexanikasi slot kontseptsiyasiga — kompozitsiya tarkibidagi har bir funksiya uchun ajratilgan maxsus xotira maydoniga asoslanadi. Ushbu slotda funksiyaga uzatilgan qiymatlar, shuningdek, keyingi chaqiruvlarda taqqoslash uchun zarur bo'lgan xizmat ma'lumotlari saqlanadi.

Composable funksiyasini qanday e'lon qilish

Composable funksiyasini e'lon qilish uchun fun kalit so'zidan oldin @Composable annotatsiyasini qo'shish kifoya. Funksiya androidx.compose.runtime dan annotatsiyani import qiladigan paketda joylashgan bo'lishi kerak. Funksiya nomini bosh harf bilan yozish tavsiya etiladi — bu Compose jamoasida qabul qilingan umumiy konvensiya bo'lib, UI komponentlarini oddiy funksiyalardan vizual ravishda ajratib turadi.

import androidx.compose.runtime.Composable

@Composable
fun Greeting(name: String) {
    var count by remember { mutableStateOf(0) }
    Column {
        Text("Salom, $name!")
        Button(onClick = { count++ }) {
            Text("$count marta bosildi")
        }
    }
}

Composable funksiyasining parametrlari har qanday bo'lishi mumkin — primitiv turlar, satrlar, lambdalar va hatto Slot API orqali uzatiladigan boshqa Composable funksiyalar. Rekompozitsiya vaqtida nojo'ya ta'sirlardan qochish uchun parametrlarni o'zgarmas (val) qilish tavsiya etiladi. Barcha o'zgaruvchan ma'lumotlar Compose holat mexanizmlari orqali boshqarilishi kerak.

Composable funksiyalari oddiy funksiyalar kabi ixtiyoriy qiymat qaytara olmaydi — ularning yagona vazifasi UI daraxtining bir qismini qurish yoki yangilashdir. Biroq, State Hoisting kabi maxsus naqshlar mavjud bo'lib, bunda Compose funksiyasi holat va callback larni parametrlar orqali qabul qiladi, toza va qayta ishlatiladigan bo'lib qoladi.

Kotlin da Composable funksiyalar qoidalari

Compose tizimi Composable funksiyalari qanday ko'rinishi va o'zini tutishi kerakligi haqida bir nechta qat'iy cheklovlar qo'yadi. Birinchi qoida: Composable funksiyasi faqat boshqa Composable funksiyalarni yoki nojo'ya ta'sirlari bo'lmagan oddiy funksiyalarni chaqira oladi. Bu kompozitsiyaning oldindan aytilishini va Compose optimizatsiyalarining to'g'ri ishlashini ta'minlaydi.

Ikkinchi qoida bajarilish tartibiga tegishli. Compose Composable funksiyalarni istalgan tartibda chaqirish huquqiga ega, shuning uchun bunday funksiyaning tanasidagi kod qo'shni funksiyalarning chaqirilish ketma-ketligiga tayanmasligi kerak. Har bir Composable funksiyasi UI daraxtidagi o'z pozitsiyasi darajasida o'zini o'zi ta'minlaydigan bo'lishi kerak.

Uchinchi qoida — Composable funksiyasi tanasida nojo'ya ta'sirlarni taqiqlash. Ma'lumotlar bazasiga yozish, tarmoq so'rovlarini yuborish yoki tashqi o'zgaruvchilarni o'zgartirish kabi amallar faqat LaunchedEffect, DisposableEffect yoki SideEffect kabi maxsus effektlar ichida bajarilishi kerak. Ushbu qoidani buzish rekompozitsiyalar vaqtida oldindan aytib bo'lmaydigan xatti-harakatlarga olib keladi.

To'rtinchi qoida: Composable funksiyalari idempotent bo'lishi kerak. Bir xil argumentlar bilan qayta chaqirish bir xil UI ni yaratishi kerak. Ushbu talab Compose kirish ma'lumotlari o'zgarmagan funksiyalarni qayta chizishni o'tkazib yuboradigan skipping optimizatsiyasining to'g'ri ishlashi uchun zarurdir.

// To'g'ri: nojo'ya ta'sirlarsiz toza Composable funksiyasi
@Composable
fun UserCard(user: User, onClick: () -> Unit) {
    Card(modifier = Modifier.clickable { onClick() }) {
        Text(text = user.name)
    }
}

// Noto'g'ri: tanada nojo'ya ta'sir
@Composable
fun WrongCard(userId: String) {
    // val result = viewModel.loadUser(userId)  // RUXSAT BERILMAYDI
    Text("Yuklanmoqda...")
}

@Composable dan foydalanish misollari

@Composable annotatsiyasidan foydalanib profil ekranini yaratishning amaliy misolini ko'rib chiqamiz. Bu yerda bir nechta Composable funksiyalarini birlashtirish, holat bilan ishlash va modifikatorlarni — har qanday Compose tartibining asosiy elementlarini namoyish etamiz.

@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 = "Foydalanuvchi #$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)
    }
}

Misolda, har bir Composable funksiyasi ekranning o'z qismi uchun javobgardir: ProfileScreen umumiy holat va bola funksiyalar kompozitsiyasini boshqaradi, ProfileHeader avatar va nomni ko'rsatadi, StatsRow esa statistika blokini. Ushbu yondashuv yagona mas'uliyat printsipiga amal qiladi va komponentlarni qayta ishlatishni soddalashtiradi.

Composable funksiyalar turlari va ularning vazifasi

Jetpack Compose da Composable funksiyalarining uchta asosiy turi mavjud. Birinchi tur — konteynerlar (Row, Column, Box, LazyColumn) bola elementlarning joylashuvini aniqlaydi. Ikkinchi — ko'rsatish elementlari (Text, Image, Icon, Button) aniq UI komponentlarini render qiladi. Uchinchi — o'rnatilgan komponentlarni qayta ishlatiladigan bloklarda birlashtiradigan maxsus Composable funksiyalar.

Konteynerlar oddiy elementlardan farqi shundaki, ular content lambdasini — @Composable () -> Unit tipidagi oxirgi parametrni qabul qiladi. Aynan shu mexanizm ichki UI daraxtlarini qurishga imkon beradi: har bir konteyner o'z konteksti va xotira maydoni bilan bola kompozitsiyani yaratadi.

Maxsus Composable funksiyalari ikki kichik turga bo'linadi: aqlli (smart) va oddiy (dumb). Aqlli funksiyalar holat va mantiqni boshqaradi — ular remember, LaunchedEffect va boshqa Compose API larining chaqiruvlarini o'z ichiga oladi. Oddiy funksiyalar barcha ma'lumotlarni parametrlar orqali qabul qiladi va faqat ularni ko'rsatadi. Aqlli va oddiy komponentlarga bo'linish test qilinishini va kodning qayta ishlatilishini yaxshilaydi.

@Composable va komponentlarni qayta ishlatish

@Composable annotatsiyasining asosiy afzalligi — meros va murakkab sinf iyerarxiyalarisiz qayta ishlatiladigan UI komponentlarini yaratish imkoniyatidir. View tizimidan farqli o'laroq, har bir maxsus element konstruktorli Java sinfini yaratishni talab qilgan bo'lsa, Composable komponenti shunchaki parametrlarga ega Kotlin funksiyasidir.

Qayta ishlatishni ta'minlash uchun Slot API naqshi qo'llaniladi, bunda Composable funksiyasi o'z tartibining turli sohalari uchun content lambdalarini qabul qiladi. Masalan, Card komponenti sarlavha, tana va pastki qism uchun alohida content qabul qilishi mumkin, bu uni ilovaning istalgan ekranlari uchun universal qiladi.

Modifikatorlar (Modifier) qayta ishlatishda asosiy rol o'ynaydi: ular komponentning o'zini o'zgartirmasdan bo'shliqlarni, o'lchamlarni, kliklarni va animatsiyalarni sozlash imkonini beradi. Modifier ni har bir maxsus Composable funksiyasiga standart qiymat bilan parametr sifatida uzatish tavsiya etiladi: Modifier = Modifier — bu Google ning rasmiy kutubxonalarida qabul qilingan standart amaliyotdir.

@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 tufayli SectionCard komponenti turli xil kontent bilan — formalar, ro'yxatlar, matn bloklari bilan turli ekranlarda ishlatilishi mumkin. Modifikatorlar va Slot API ning birlashishi Compose komponentlarini Kotlin ta'minlagan tip xavfsizligini yo'qotmasdan maksimal darajada moslashuvchan qiladi.