Composable Function: bu nima, funksiya sintaksisi va qoidalar

Jetpack Compose-da Composable Function nima

Composable Function — Kotlin tilida @Composable annotatsiyasi bilan belgilangan, foydalanuvchi interfeysining bir qismini deklarativ tarzda tavsiflovchi funksiyadir. Java kodi yoki XML belgilash orqali View obyektlarini yaratish va sozlash o'rniga, dasturchi shunchaki UI har bir ma'lumot holatida qanday ko'rinishi kerakligini yozadi.

Composable-funksiya va an'anaviy Android View tizimi o'rtasidagi asosiy farq yangilanish modelidadir. Klassik yondashuvda dasturchi qo'lda findViewById chaqiradi, setText orqali matnni o'zgartiradi, setVisibility orqali ko'rinishni boshqaradi. Composable Function bu odatdan ozod qiladi: ma'lumot o'zgarganda, tizim o'zi qaysi funksiyalarni qayta ishga tushirish kerakligini aniqlaydi va faqat ularni bajaradi.

Kotlin kompilyatori @Composable annotatsiyasini qayta ishlab, funksiyani kompozitsiya mexanizmiga integratsiyalovchi qo'shimcha kod yaratadi. Bu kod slotlarga — joriy UI daraxtidagi har bir Composable-funksiyaning holati va parametrlarini saqlovchi maxsus xotira hujayralariga o'qish va yozishni o'z ichiga oladi. Ushbu integratsiya tufayli Compose qaysi funksiyalar qaysi ma'lumotlarga bog'liqligini biladi.

Composable-funksiyani e'lon qilish sintaksisi

Composable-funksiya sintaksisi maksimal darajada ixcham: fun kalit so'zidan oldin @Composable qo'shish kifoya. Funksiya istalgan parametrlarni qabul qilishi, o'z tanasida boshqa Composable chaqiruvlarini o'z ichiga olishi va UI-ni shartli ko'rsatish uchun Kotlin konstruksiyalaridan — shartlardan, sikllardan, when ifodalaridan — foydalanishi mumkin.

@Composable
fun ProductItem(
    product: Product,
    modifier: Modifier = Modifier,
    onAddToCart: () -> Unit
) {
    Card(modifier = modifier.padding(8.dp)) {
        Row(modifier = Modifier.fillMaxWidth().padding(12.dp),
            verticalAlignment = Alignment.CenterVertically) {
            Column(modifier = Modifier.weight(1f)) {
                Text(text = product.name, style = MaterialTheme.typography.titleMedium)
                Text(text = "${product.price}", color = MaterialTheme.colorScheme.primary)
            }
            Button(onClick = onAddToCart) {
                Text("Savatga qo'shish")
            }
        }
    }
}

Ushbu misolda ProductItem Composable-funksiyasi Product obyektini, modifikatorni va callback-ni qabul qiladi. Uchala parametr ham o'zgarmasdir, bu rekompozitsiyada bashorat qilinadigan xatti-harakatni kafolatlaydi. Modifikator standart qiymat bilan parametr sifatida uzatilgan — bu chaqiruvchi tomonga bo'shliqlar va o'lchamlarni sozlash imkonini beruvchi standart amaliyotdir.

Composable-funksiyalarda komponentlar va modifikatorlar

Composable-funksiya ichida Material Design-ning o'rnatilgan komponentlaridan (Text, Button, Card, TextField) yoki fundamental primitivlardan (Canvas, Layout) foydalaniladi. Har bir komponent ko'rinish va xatti-harakatni sozlash uchun parametrlarni, shuningdek, modifier parametri orqali bir yoki bir nechta modifikatorni qabul qiladi.

Modifikatorlar (Modifier) — komponentning o'lchamini, joylashuvini, hodisalarni boshqarish va ko'rinishini o'zgartiruvchi funksiyalar zanjiridir. Modifikatorlar tartibi zanjirda muhim: clickable.semantics semantics.clickable-dan farqli ishlaydi, padding.background esa paddingni ham o'z ichiga olgan fon maydonini bo'yaydi, bu dizayn paytida juda muhimdir.

Composable-funksiya ichida UI qismlarini shartli ko'rsatish uchun if va when shartlaridan, dinamik ro'yxatlar uchun for sikllaridan foydalanish mumkin. Bu konstruksiyalarning barchasi tabiiy ishlaydi, chunki Kotlin to'liq huquqli dasturlash tilidir. Biroq esda tutish muhim: agar shart yoki sikl Composable-funksiya chaqiruvlarini o'z ichiga olsa, ular ham rekompozitsiyada ishtirok etadi.

@Composable
fun ProductList(
    products: List<Product>,
    modifier: Modifier = Modifier
) {
    LazyColumn(modifier = modifier) {
        items(products, key = { it.id }) { product ->
            ProductItem(
                product = product,
                onAddToCart = { /* add to cart */ }
            )
        }
    }
}

Haqiqiy ekranlar uchun Composable-funksiya misollari

Bir nechta Composable-funksiyadan foydalangan holda mahsulot qidirish ekrani misolini ko'rib chiqaylik. Bu yerda odatiy namunalar ko'rsatilgan: holatli kiritish maydoni, ro'yxatni filtrlash, bo'sh natija va yuklashni boshqarish.

data class Product(
    val id: String,
    val name: String,
    val price: Double,
    val category: String
)

@Composable
fun SearchScreen() {
    var query by remember { mutableStateOf("") }
    val products = remember(query) { getFilteredProducts(query) }

    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        OutlinedTextField(
            value = query,
            onValueChange = { query = it },
            label = { Text("Mahsulotlarni qidirish") },
            modifier = Modifier.fillMaxWidth()
        )

        Spacer(modifier = Modifier.height(16.dp))

        when (products) {
            is Loading -> CircularProgressIndicator()
            is Empty -> Text("Natija topilmadi")
            is Result -> LazyColumn {
                items(products.items, key = { it.id }) { product ->
                    ProductItem(product = product, onAddToCart = {})
                }
            }
        }
    }
}

Ushbu misol bir vaqtning o'zida bir nechta idiomni namoyish etadi: qidiruv so'rovining holatini saqlash uchun remember, kalit bilan filtrlash uchun remember(query), UI ning uchta holati uchun when va ro'yxatni samarali ko'rsatish uchun LazyColumn. Bu idiomlarning har biri Compose ilovalarini ishlab chiqishdagi amaliy tajribaning natijasidir.

Parametrlar va Slot API

Composable-funksiyalar parametrlarni oddiy Kotlin funksiyalari kabi qabul qiladi, lekin bir muhim farq bilan: parametr @Composable annotatsiyasi bilan lambda orqali uzatiladigan boshqa Composable-funksiya bo'lishi mumkin. Bu mexanizm Slot API deb ataladi va qayta foydalanish mumkin bo'lgan konteynerlarni yaratish uchun asosiy namunadir.

Slot API an'anaviy View tizimida ViewGroup va bolaviy View-larni dasturiy qo'shish orqali hal qilinadigan muammoni hal qiladi. addView metodlari o'rniga Compose content-lambdalaridan — @Composable () -> Unit tipidagi oxirgi parametrdan foydalanadi. Chaqiruvchi tomon bu lambdaga istalgan UI-ni uzatadi, konteyner esa faqat uning joylashishini belgilaydi.

Composable-funksiya parametrlari standart qiymatlarga ega bo'lishi mumkin, bu ularni turli kontekstlarda ishlatishni soddalashtiradi. Tavsiya etiladi faqat funksiya o'z vazifasini bajara olmaydigan parametrlarni majburiy qilish, qolganlarini esa mantiqiy standart qiymatlar bilan ta'minlash.

Kotlin-da Composable-funksiya idiomlari

Compose hamjamiyatida Composable-funksiyalarni yanada o'qiladigan va bashorat qilinadigan qiladigan bir nechta o'rnatilgan idiomlar shakllangan. Birinchisi — State Hoisting: holat yuqori darajaga ko'tariladi va Composable-funksiya uni parametrlar orqali oladi. Bu funksiyani toza va turli kontekstlarda qayta foydalanish mumkin qiladi.

Ikkinchi idiom — Event-driven parametrlar. Composable-funksiyaga ViewModel yoki useCase uzatish o'rniga, faqat aniq callback-lar uzatiladi: onSave, onDelete, onNavigateToDetail. Bu bog'liqlikni kamaytiradi va testlashni soddalashtiradi — ProductItem testi uchun ViewModel emas, faqat lambda-stub kerak.

Uchinchi idiom — kompozitsiya daraxti orqali umumiy ma'lumotlarni uzatish uchun CompositionLocal. Tema, ekran zichligi, joriy marshrut — bularning barchasi o'nlab Composable-funksiyalar orqali parametr zanjirlaridan qochib, CompositionLocal orqali uzatiladi. Biroq CompositionLocal-dan suiiste'mol qilish kerak emas: aniq parametrlar har doim noaniq bog'liqliklardan afzaldir.

// State Hoisting: holat ota-funksiyaga ko'tarildi
@Composable
fun CounterDisplay(
    count: Int,
    onIncrement: () -> Unit
) {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text(text = "Hisoblagich: $count", style = MaterialTheme.typography.headlineLarge)
        Button(onClick = onIncrement) {
            Text("+1")
        }
    }
}

// State Hoisting bilan foydalanish
@Composable
fun CounterScreen() {
    var count by remember { mutableStateOf(0) }
    CounterDisplay(
        count = count,
        onIncrement = { count++ }
    )
}