Composition: mahiyyəti, UI ağacının Compose-da qurulması

Jetpack Compose-da Composition nədir

Composition — Composable funksiyalarının yerinə yetirilməsi prosesidir, bunun nəticəsində qovşaqlar ağacı şəklində istifadəçi interfeysinin daxili təsviri formalaşır. Bu ağacın hər bir qovşağı ya daxili komponentə (Text, Button, Image) uyğun gəlir, ya da fərdi Composable funksiyasının çağırışına. Composition birbaşa Android View obyektləri yaratmır — o, sonradan Layout və Drawing fazaları tərəfindən işlənəcək abstrakt təsvir qurur.

Composition-un əsas xüsusiyyəti onun yenidən başlama qabiliyyətidir (restartability). Kompozisiyanın tərkibindəki hər bir Composable funksiyası istənilən vaxt yenidən başladıla bilər, əgər onun giriş parametrləri və ya oxuduğu vəziyyət obyektləri dəyişibsə. Sistem bütün ağacı deyil, yalnız dəyişmiş məlumatlardan asılı olan funksiyaları yenidən başladır.

Texniki olaraq, Composition Composer vasitəsilə idarə olunur — Kotlin kompilyatorunun hər bir Composable funksiyasına yerləşdirdiyi daxili mühərrik. Composer slotlara (mövqe qruplarına) hansı funksiyaların hansı parametrlərlə və hansı ardıcıllıqla çağırıldığı barədə məlumat yazır. Növbəti çağırışlarda Composer yeni məlumatları saxlanılanlarla müqayisə edir və yenidən başlatma qərarı verir.

Composition prosesində UI ağacı necə qurulur

UI ağacının qurulması prosesi Activity və ya Fragment daxilində setContent metodunun çağırılması ilə başlayır. Bu metod ilkin Composition yaradır və kök Composable funksiyasının icrasını işə salır. Sonra hər bir iç-içə Composable funksiyası ağaca öz qovşaqlarını əlavə edir, iyerarxiya formalaşdırır: Row Text və Button-u ehtiva edir, Column Image və Card-ı ehtiva edir və s.

Hər bir ağac qovşağı mənbə kodundakı mövqeyinə əsaslanan unikal mövqe açarı alır. Bu açar təkrar icralarda qovşağı identifikasiya etmək üçün istifadə olunur. Mövqe açarı Composable funksiyalarının çağırış ardıcıllığının şərtlərdən asılı olmamalı olduğunun səbəbidir: əgər bir icrada A -> B çağırılıbsa, növbəti icrada B -> A çağırılıbsa, Compose köhnə və yeni qovşaqları uyğunlaşdıra bilməyəcək.

@Composable
fun AppScreen() {
    Column {                     // Column qovşağı (mövqe 1)
        HeaderSection()            // HeaderSection qovşağı (mövqe 2)
        ContentSection()           // ContentSection qovşağı (mövqe 3)
        FooterSection()            // FooterSection qovşağı (mövqe 4)
    }
}

@Composable
fun HeaderSection() {
    Row {                       // Row qovşağı (mövqe 2.1)
        Text("Başlıq")         // Text qovşağı (mövqe 2.2)
        Icon(...)                // Icon qovşağı (mövqe 2.3)
    }
}

Bu nümunədə hər bir çağırış koddakı ardıcıllığa əsaslanan mövqe alır. Column (mövqe 1) üç uşaq qovşağı ehtiva edir (mövqe 2, 3, 4). HeaderSection daha iki uşaq qovşağı əlavə edir (2.1, 2.2, 2.3). Əgər növbəti rekompozisiyada ContentSection HeaderSection-dan əvvəl çağırılsa, Composer qovşaqları düzgün uyğunlaşdıra bilməyəcək — buna görə də qayda: Composable funksiyalarının çağırış ardıcıllığı sabit olmalıdır.

Composition-da vəziyyətin idarə edilməsi

Composition-da vəziyyət State<T> tipli obyektlər vasitəsilə idarə olunur. Composable funksiyası delegə edilmiş xassə (by) vasitəsilə State-dən dəyər oxuduqda, bu State-dən asılılığı qeydə alır. Dəyər dəyişdikdə, bu State-i oxuyan bütün funksiyalar kompozisiyanın növbəti mərhələsində yenidən başlamaq üçün işarələnir.

Asılılıqların qeydiyyatı mexanizmi snapshot sistemi adlanır. State hər dəfə dəyişdikdə, snapshot bütün dəyişiklikləri qeydə alır və Composer-ə bu State-dən hansı funksiyaların asılı olduğunu bildirir. Başa düşmək vacibdir: Composable olmayan koddakı State oxuması (məsələn, onClick lambdasında) asılılığı qeydə almır — yalnız Composable funksiyası daxilində və ya kompozisiya kontekstində yerinə yetirilən lambdalardakı oxuma.

Snapshot sistemi tranzaksiya şəklində işləyir: bir hadisə çərçivəsində State-dəki bir neçə dəyişiklik bir tranzaksiyada birləşdirilir, bu da çoxsaylı rekompozisiyaların qarşısını alır. Bu, xüsusilə jestlərin işlənməsi zamanı vacibdir: bir hərəkət zamanı bir neçə State obyekti dəyişir, lakin Compose yalnız bir rekompozisiya yerinə yetirir.

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

    Column {
        Text(text)  // text-dən asılılığı qeyd edir

        if (isVisible) {  // isVisible-dən asılılığı qeyd edir
            TextField(value = text, onValueChange = { text = it })
        }

        Button(onClick = { isVisible = !isVisible }) {
            Text(if (isVisible) "Gizlət" else "Göstər")
        }
    }
}

text-in dəyişməsi yalnız Column, Text və TextField-in rekompozisiyasına səbəb olur. Button və isVisible şərti dəyişməz qalır. Rekompozisiyanın bu cür izolyasiyası Compose-un bütün ekranı yenidən çəkən sistemlərlə müqayisədə əsas üstünlüyüdür. Hər bir Composable funksiyası yalnız birbaşa oxuduğu State obyektlərini izləyir.

Composition vs Recomposition: əsas fərqlər

Composition (kompozisiya) və Recomposition (rekompozisiya) — Composable funksiyalarının yerinə yetirilməsinin iki fərqli rejimi. Composition ekran yaradılarkən bir dəfə baş verir: sistem bütün Composable funksiyalarını ilkin dəyərlərlə yerinə yetirir və ilkin UI ağacını qurur. Recomposition məlumatlar dəyişdikdə dəfələrlə baş verir: sistem yalnız dəyişmiş vəziyyətdən asılı olan funksiyaları yenidən başladır.

Rejim Composition ağacın bütün qovşaqlarını aktivləşdirir, hər bir funksiya üçün slotlar ayırır, bütün varisləri qeydə alır. Recomposition seçici işləyir: Compose hər bir funksiyanın parametrlərinin yeni və köhnə dəyərlərini müqayisə edir və əgər onlar dəyişməyibsə — funksiya yerinə yetirilmir (skipping).

Composition və Recomposition xərc baxımından fərqlənir. İlk Composition daha bahadır, çünki ağacın tam qurulmasını və slotların ayrılmasını tələb edir. Recomposition daha ucuzdur, xüsusən də funksiyaların əksəriyyəti sabitdirsə — onların parametrləri equals vasitəsilə müqayisə edilir və Compose onların çağırışını atlayır. Maksimum performans üçün rekompozisiyanın mümkün qədər az funksiyaya təsir etməsinə çalışmaq lazımdır.

CompositionLocal: məlumatların ağac vasitəsilə ötürülməsi

CompositionLocal — kompozisiya ağacı vasitəsilə məlumatların gizli ötürülməsi mexanizmi. O, parametrin birbaşa istifadə etməyən onlarla iç-içə Composable funksiyası vasitəsilə ötürülməsi problemini həll edir. Açıq parametr zənciri əvəzinə məlumatlar yuxarı səviyyədə qurulur və istənilən iç-içə funksiyada CompositionLocal.current vasitəsilə oxunur.

MaterialTheme mövzusu — CompositionLocal-ın ən məşhur nümunəsidir. Compose-un bütün komponentləri rəngləri, tipoqrafiyanı və formaları MaterialTheme.colorScheme, MaterialTheme.typography, MaterialTheme.shapes vasitəsilə oxuyur, onları parametrlərlə qəbul etmədən. Tərtibatçı cari istifadəçi, lokallaşdırma parametrləri və ya ekran konfiqurasiyası kimi məlumatlar üçün öz CompositionLocal-nı yarada bilər.

Vacib məhdudiyyət: CompositionLocal tez-tez dəyişən məlumatlar üçün istifadə edilməməlidir (sürüşdürmə mövqeyi, giriş sahəsindəki mətn). CompositionLocal oxuyan komponent hər dəfə dəyər dəyişdikdə yenidən başladılır, buna görə də dinamik məlumatlar üçün açıq parametrlər və ya State istifadə etmək daha yaxşıdır. CompositionLocal nadir hallarda dəyişən və ya heç dəyişməyən konfiqurasiya məlumatları üçün optimaldır.

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  // açıq parametr olmadan oxuma
    AsyncImage(model = user?.avatarUrl, contentDescription = "Avatar")
}

CompositionLocalProvider görünmə sahəsi yaradır, onun daxilində LocalUser.current müəyyən edilmiş dəyəri qaytarır. UserAvatar istifadəçini ara funksiyalar vasitəsilə açıq parametr ötürülmədən oxuyur. Bu, xüsusilə dərin iyerarxiyalarda, məlumatların yalnız bir neçə yarpaq qovşağında lazım olduğu hallarda qiymətlidir.