Composition: mohiyati, UI daraxtini Compose-da qurish

Jetpack Compose-da Composition nima

Composition — Composable funksiyalarini bajarish jarayoni bo'lib, natijada foydalanuvchi interfeysining ichki tasviri tugunlar daraxti shaklida shakllanadi. Bu daraxtning har bir tuguni yoki o'rnatilgan komponentga (Text, Button, Image) yoki maxsus Composable funksiyasining chaqiruviga mos keladi. Composition to'g'ridan-to'g'ri Android View obyektlarini yaratmaydi — u keyinchalik Layout va Drawing fazalari tomonidan qayta ishlanadigan mavhum tavsifni quradi.

Composition-ning asosiy xususiyati uning qayta ishga tushirish qobiliyati (restartability). Kompozitsiya tarkibidagi har bir Composable funksiyasi istalgan vaqtda qayta ishga tushirilishi mumkin, agar uning kirish parametrlari yoki o'qigan holat obyektlari o'zgargan bo'lsa. Tizim butun daraxtni emas, faqat o'zgargan ma'lumotlarga bog'liq bo'lgan funksiyalarni qayta ishga tushiradi.

Texnik jihatdan, Composition Composer tomonidan boshqariladi — Kotlin kompilyatori har bir Composable funksiyasiga o'rnatadigan ichki dvigatel. Composer slotlarga (pozitsiya guruhlariga) qaysi funksiyalar qanday parametrlar bilan va qanday tartibda chaqirilganligi haqida ma'lumot yozadi. Keyingi chaqiruvlarda Composer yangi ma'lumotlarni saqlanganlar bilan solishtiradi va qayta ishga tushirish to'g'risida qaror qabul qiladi.

Composition jarayonida UI daraxti qanday quriladi

UI daraxtini qurish jarayoni Activity yoki Fragment ichida setContent metodini chaqirish bilan boshlanadi. Bu metod boshlang'ich Composition yaratadi va ildiz Composable funksiyasining bajarilishini ishga tushiradi. Keyin har bir ichki joylashgan Composable funksiyasi daraxtga o'z tugunlarini qo'shib, iyerarxiyani shakllantiradi: Row tarkibida Text va Button, Column tarkibida Image va Card va hokazo.

Har bir daraxt tuguni manba kodidagi joylashuviga asoslangan noyob pozitsiya kalitini oladi. Bu kalit takroriy bajarilishlarda tugunni identifikatsiya qilish uchun ishlatiladi. Pozitsiya kaliti Composable funksiyalarini chaqirish tartibi shartlarga bog'liq bo'lmasligi kerakligining sababidir: agar bir bajarilishda A -> B chaqirilgan bo'lsa, keyingisida B -> A chaqirilsa, Compose eski va yangi tugunlarni moslashtira olmaydi.

@Composable
fun AppScreen() {
    Column {                     // Column tuguni (pozitsiya 1)
        HeaderSection()            // HeaderSection tuguni (pozitsiya 2)
        ContentSection()           // ContentSection tuguni (pozitsiya 3)
        FooterSection()            // FooterSection tuguni (pozitsiya 4)
    }
}

@Composable
fun HeaderSection() {
    Row {                       // Row tuguni (pozitsiya 2.1)
        Text("Sarlavha")         // Text tuguni (pozitsiya 2.2)
        Icon(...)                // Icon tuguni (pozitsiya 2.3)
    }
}

Bu misolda har bir chaqiruv koddagi tartibga asoslangan pozitsiyani oladi. Column (pozitsiya 1) uchta bola tugunni o'z ichiga oladi (pozitsiyalar 2, 3, 4). HeaderSection yana ikkita bola tugunni qo'shadi (2.1, 2.2, 2.3). Agar keyingi rekompozitsiyada ContentSection HeaderSection-dan oldin chaqirilsa, Composer tugunlarni to'g'ri moslashtira olmaydi — shuning uchun qoida: Composable funksiyalarini chaqirish tartibi barqaror bo'lishi kerak.

Composition-da holatni boshqarish

Composition-da holat State<T> tipidagi obyektlar orqali boshqariladi. Composable funksiyasi delegatsiya qilingan xususiyat (by) orqali State-dan qiymat o'qiganda, ushbu State-ga bog'liqlikni ro'yxatdan o'tkazadi. Qiymat o'zgarganda, ushbu State-ni o'qigan barcha funksiyalar kompozitsiyaning keyingi bosqichida qayta ishga tushirish uchun belgilanadi.

Bog'liqliklarni ro'yxatdan o'tkazish mexanizmi snapshot tizimi deb ataladi. Har safar State o'zgarganda, snapshot barcha o'zgarishlarni qayd etadi va Composer-ga ushbu State-ga qaysi funksiyalar bog'liqligini xabar qiladi. Tushunish muhim: Composable bo'lmagan koddagi State o'qishi (masalan, onClick lambdasida) bog'liqlikni ro'yxatdan o'tkazmaydi — faqat Composable funksiyasi ichida yoki kompozitsiya kontekstida bajariladigan lambdalardagi o'qish.

Snapshot tizimi tranzaksiya tarzida ishlaydi: bitta hodisa doirasidagi State-dagi bir nechta o'zgarishlar bitta tranzaksiyaga birlashtiriladi, bu ko'p marta rekompozitsiyalarning oldini oladi. Bu, ayniqsa, imo-ishoralarni qayta ishlashda muhim: bir harakat davomida bir nechta State obyekti o'zgaradi, ammo Compose faqat bitta rekompozitsiyani bajaradi.

@Composable
fun StateExample() {
    var text by remember { mutableStateOf("Hello") }
    var isVisible by remember { mutableStateOf(true) }

    Column {
        Text(text)  // text ga bog'liqlikni ro'yxatdan o'tkazadi

        if (isVisible) {  // isVisible ga bog'liqlikni ro'yxatdan o'tkazadi
            TextField(value = text, onValueChange = { text = it })
        }

        Button(onClick = { isVisible = !isVisible }) {
            Text(if (isVisible) "Yashirish" else "Ko'rsatish")
        }
    }
}

text ning o'zgarishi faqat Column, Text va TextField ning rekompozitsiyasiga olib keladi. Button va isVisible sharti o'zgarishsiz qoladi. Rekompozitsiyaning bunday izolyatsiyasi Compose-ni butun ekranni qayta chizadigan tizimlardan asosiy ustunligidir. Har bir Composable funksiyasi faqat to'g'ridan-to'g'ri o'qigan State obyektlarini kuzatadi.

Composition vs Recomposition: asosiy farqlar

Composition (kompozitsiya) va Recomposition (rekompozitsiya) — Composable funksiyalarini bajarishning ikki xil rejimi. Composition ekran yaratilganda bir marta sodir bo'ladi: tizim barcha Composable funksiyalarini boshlang'ich qiymatlar bilan bajaradi va boshlang'ich UI daraxtini quradi. Recomposition ma'lumotlar o'zgarganda ko'p marta sodir bo'ladi: tizim faqat o'zgargan holatga bog'liq bo'lgan funksiyalarni qayta ishga tushiradi.

Rejim Composition daraxtning barcha tugunlarini faollashtiradi, har bir funksiya uchun slotlar ajratadi, barcha avlodlarni ro'yxatdan o'tkazadi. Recomposition tanlab ishlaydi: Compose har bir funksiya parametrlarining yangi va eski qiymatlarini solishtiradi va agar ular o'zgarmagan bo'lsa — funksiya bajarilmaydi (skipping).

Composition va Recomposition narxi bilan farqlanadi. Birinchi Composition qimmatroq, chunki daraxtni to'liq qurish va slotlarni ajratishni talab qiladi. Recomposition arzonroq, ayniqsa funksiyalarning aksariyati barqaror bo'lsa — ularning parametrlari equals orqali solishtiriladi va Compose ularning chaqiruvini o'tkazib yuboradi. Maksimal samaradorlik uchun rekompozitsiya imkon qadar kam funksiyaga ta'sir qilishiga harakat qilish kerak.

CompositionLocal: ma'lumotlarni daraxt orqali uzatish

CompositionLocal — kompozitsiya daraxti orqali ma'lumotlarni yashirin uzatish mexanizmi. U parametrni to'g'ridan-to'g'ri ishlatmaydigan o'nlab ichki joylashgan Composable funksiyalari orqali uzatish kerak bo'lganda muammoni hal qiladi. Aniq parametrlar zanjiri o'rniga, ma'lumotlar yuqori darajada o'rnatiladi va istalgan ichki funksiyada CompositionLocal.current orqali o'qiladi.

MaterialTheme mavzusi — CompositionLocal-ning eng mashhur namunasidir. Compose-ning barcha komponentlari ranglar, tipografiya va shakllarni MaterialTheme.colorScheme, MaterialTheme.typography, MaterialTheme.shapes orqali o'qiydi, ularni parametrlar orqali qabul qilmasdan. Dasturchi joriy foydalanuvchi, lokalizatsiya sozlamalari yoki ekran konfiguratsiyasi kabi ma'lumotlar uchun o'z CompositionLocal-larini yaratishi mumkin.

Muhim cheklov: CompositionLocal tez-tez o'zgaruvchi ma'lumotlar (skroll holati, kiritish maydonidagi matn) uchun ishlatilmasligi kerak. CompositionLocal-ni o'qigan komponent har bir qiymat o'zgarishida qayta ishga tushiriladi, shuning uchun dinamik ma'lumotlar uchun aniq parametrlar yoki State dan foydalanish yaxshiroqdir. CompositionLocal kamdan-kam yoki hech qachon o'zgarmaydigan konfiguratsiya ma'lumotlari uchun optimaldir.

val LocalUser = compositionLocalOf<User?> { null }

@Composable
fun AppRoot(user: User, content: @Composable () -> Unit) {
    CompositionLocalProvider(LocalUser.provides(user)) {
        content()
    }
}

@Composable
fun UserAvatar() {
    val user = LocalUser.current  // aniq parametrsiz o'qish
    AsyncImage(model = user?.avatarUrl, contentDescription = "Avatar")
}

CompositionLocalProvider ko'rinish sohasini yaratadi, uning ichida LocalUser.current o'rnatilgan qiymatni qaytaradi. UserAvatar foydalanuvchini oraliq funksiyalar orqali aniq parametr uzatmasdan o'qiydi. Bu, ayniqsa, chuqur iyerarxiyalarda, ma'lumotlar faqat bir nechta barg tugunlarida kerak bo'lganda qimmatlidir.