Modifier — modifikatorlar zənciri və Compose-da performans

Müəllif: IT Sectr Dərc olunub: 2026-06-28 Oxuma vaxtı: 8 dəq

Modifier — Jetpack Compose-da dəyişməz obyektdir, UI komponentinin xüsusiyyətlərini müəyyən edir: ölçü, boşluqlar, fon, jestlərin işlənməsi və davranış. Modifikatorlar ardıcıl çağırış vasitəsilə zəncirdə birləşdirilir və onların tətbiq sırası nəticəyə kritik təsir göstərir. Google Android Developers, 2026-ya görə, Modifier-in düzgün istifadəsi deklarativ UI-də çevik və məhsuldar interfeys qurmağın əsasıdır.

Əsas məqamlar

  • Modifier — UI komponentinin görünüşünü və davranışını təsvir edən dəyişməz obyekt
  • Zəncir modifikatorlar ardıcıl qurulur, sıralama ekrana təsir edir
  • Sıralama vacibdir: padding → size size → padding-dən fərqlənir
  • Modifier.composed öz mürəkkəb modifikatorlarınızı yaratmağa imkan verir
  • Optimizasiya: hər rekompozisiyada Modifier-in yenidən yaradılmasından çəkinin

Jetpack Compose-da Modifier nədir

Modifier — androidx.compose.ui paketindən interfeysdir, Composite nümunəsini tətbiq edir. Hər modifikator zəncirin bir elementidir, əvvəlkini sarır və öz davranışını əlavə edir. Modifier dəyişməzdir — hər hansı dəyişiklik zəncirə yeni element əlavə edilməklə kopyalama vasitəsilə yeni obyekt yaradır. Bu, bir Modifier-in çoxlu komponentlər arasında təhlükəsiz paylaşılmasına imkan verir.

Əsas modifikator-funksiyalar Modifier yoldaş obyekti vasitəsilə çağırılır (məsələn, Modifier.padding(), Modifier.fillMaxWidth()). Hər funksiya əlavə edilmiş elementlə yeni Modifier qaytarır. Bir neçə modifikator varsa, onlar zəncirdə birləşir: Modifier.padding(16.dp).fillMaxWidth().background(Color.Blue). Sıralama UI elementinə nisbətən xaricdən içəriyə doğru istiqamətdir.

Ənənəvi View-lərdən fərqli olaraq, burada xüsusiyyətlər setter-lər (view.setPadding(...), view.setBackground(...)) vasitəsilə təyin edilirdi, Compose-da Modifier deklarativ təsvirdir. Komponent iş zamanı modifikatorları "tətbiq etmir" — LayoutNode kompozisiya mərhələsində Modifier zəncirindən keçir və Modifier.Element siyahısını toplayır, sonra bunlar ölçmə və yerləşdirmə mərhələsində işlənir.

Modifikatorlar zənciri və tətbiq sırası

Modifikatorların sırası — Compose-da ən çox rast gəlinən səhvlərdən biridir. Hər modifikator əvvəlkini sarır və əməliyyatlar xaricdən içəriyə doğru yerinə yetirilir. Məsələn, padding(16.dp).clickable { }: əvvəlcə elementin ətrafında boşluq əlavə edilir, sonra klik sahəsi boşluğu da əhatə edir. clickable { }.padding(16.dp): əvvəlcə klik sahəsi elementin ölçüsünə bərabərdir, sonra boşluq ətrafa əlavə edilir — boşluğa klik işləməyəcək.

Yaddaş qaydası: zənciri soldan sağa oxuyun və xaricdən içəriyə tətbiq edin. Birinci modifikator — ən xarici, elementin ətrafındakı sahəyə tətbiq olunur. Sonuncu — ən daxili, birbaşa məzmuna tətbiq olunur. Ölçü modifikatorları (size, fillMaxWidth) boşluqlardan sonra gəlməlidir, əgər boşluq valideyndən tələb olunursa, ya da boşluqlardan əvvəl, əgər məzmun əvvəlcə məhdudlaşdırılmalı, sonra mərkəzləşdirilməlidirsə.

Nümunə: size(100.dp).padding(10.dp) — sabit ölçülü element 100dp, sonra kənardan padding 10dp (son ölçü 120dp). padding(10.dp).size(100.dp) — padding 10dp mövcud sahəni azaldır (valideyn - 20dp), sonra size(100dp) valideyni daşdıra bilər. Həmişə sıralamanı şüurlu şəkildə düşünün, nəticəni yoxlamaq üçün ekran testlərindən istifadə edin.

SıralamaNəticə
padding → clickableKlik boşluq sahəsində də işləyir
clickable → paddingKlik yalnız məzmunda işləyir, boşluq — ölü zona
size → paddingElement size(100), kənardan padding → 100+2*pad
padding → sizepadding yeri azaldır, size sərhədləri aşa bilər
background → paddingFon xarici sahə də daxil olmaqla bütün elementi doldurur
padding → backgroundFon yalnız boşluq daxilindədir (xarici sahə şəffafdır)

Modifikator növləri: ölçü, boşluq, dekorasiya və davranış

Standart Compose kitabxanası ~50+ modifikatoru əhatə edir, kateqoriyalara bölünmüşdür. Ölçü və mövqeləndirmə: Modifier.size(), width(), height(), fillMaxSize(), fillMaxWidth(), fillMaxHeight(), defaultMinSize(), requiredSize(). Boşluqlar və sərhədlər: padding(), offset(), margin (valideynin padding-i və ya Layout vasitəsilə yerləşdirilir). Dekorasiya: background(), border(), clip(), alpha(), shadow(), blur().

Davranış və jestlər: clickable(), combinedClickable(), pointerInput(), draggable(), swipeable(). Konteynerdə yerləşdirmə: weight() (Row/Column üçün), align(), alignBy(), matchParentSize(). Semantika və əlçatanlıq: semantics(), testTag(), clearAndSetSemantics(). Rəsm: drawBehind(), drawWithContent(), drawModifier() — kanvada xüsusi rəsm çəkməyə imkan verən modifikatorlar.

Semantik modifikatorlar — xüsusi kateqoriya. Modifier.semantics {} elementin Accessibility ağacında necə təqdim olunacağını müəyyən edir. Compose mətndən semantikanı avtomatik doldurur, lakin xüsusi komponentlər üçün rolları, vəziyyətləri və hərəkətləri əl ilə təyin etmək lazımdır. Bu, WCAG 2.2 uyğunluğu və TalkBack (Android) və VoiceOver (iOS) düzgün işləməsi üçün kritik əhəmiyyət daşıyır.

kotlin
@Composable
fun ModifierDemo() {
    // Düzgün sıra ilə modifikatorlar zənciri
    Box(
        modifier = Modifier
            .size(150.dp)
            .padding(8.dp)
            .border(2.dp, Color.Gray)
            .background(Color(0xFFE3F2FD))
            .clickable { /* handle click */ }
            .semantics {
                contentDescription = "Demo card with click action"
                role = Role.Button
            }
    ) {
        Text("Mənə toxun")
    }
}

Modifier.composed ilə xüsusi modifikatorların yaradılması

Modifier.composed — digər modifikatorlardan, LocalComposition və lokal dövlətdən istifadə edə bilən mürəkkəb modifikatorlar yaratmağa imkan verən fabrik metodudur. Adi genişləndirmə funksiyasından fərqli olaraq, composed hər tətbiqdə bir nümunə yaradır ki, bu da modifikator daxilində öz vəziyyətinə sahib olmağa imkan verir.

Composed nə vaxt istifadə edilməlidir: təkrarlanan kombinasiyalar (məsələn, standart kart üslubu: padding + background + border + clickable); vəziyyətli modifikatorlar (basıldıqda animasiyalı fon dəyişməsi); CompositionLocals-a giriş (MaterialTheme rəng sxemi, piksel sıxlığı). Adi hallarda composed-siz adi genişləndirmə funksiyası kifayətdir.

Composed performansı: hər çağırış yeni modifikator obyekti yaradır ki, bu da rekompozisiyada əlavə alokasiyalara səbəb ola bilər. Bunun qarşısını almaq üçün composed-i remember ilə sarın. Google composed-dən yalnız daxildə həqiqətən vəziyyət və ya CompositionLocal lazım olduqda istifadə etməyi tövsiyə edir. Statik kombinasiyalar üçün adi genişləndirmə funksiyalarından istifadə edin.

kotlin
// Vəziyyətlə composed vasitəsilə xüsusi modifikator
fun Modifier.cardStyle(
    elevation: Dp = 4.dp,
    isSelected: Boolean = false
): Modifier = this.composed {
    val backgroundColor = if (isSelected)
        MaterialTheme.colorScheme.primaryContainer
    else
        MaterialTheme.colorScheme.surface

    this
        .fillMaxWidth()
        .padding(12.dp)
        .background(backgroundColor, RoundedCornerShape(8.dp))
        .shadow(elevation, RoundedCornerShape(8.dp))
}

// İstifadə nümunəsi
@Composable
fun CardList() {
    Column {
        Box(Modifier.cardStyle()) { Text("Element 1") }
        Box(Modifier.cardStyle(isSelected = true)) { Text("Seçildi") }
    }
}

// Statik versiya (composed olmadan) — daha sürətli
fun Modifier.simpleCardStyle(): Modifier =
    this.fillMaxWidth().padding(8.dp).clip(RoundedCornerShape(4.dp))

Modifier performansı və ən yaxşı təcrübələr

Hər rekompozisiyada Modifier-in yenidən yaradılmasından çəkinin. Əgər modifikator dəyişən verilənlərdən asılı deyilsə — onu sabitə və ya remember-ə çıxarın. Hər dəfə Modifier.padding().background() çağırıldıqda yeni Modifier.Element obyektləri yaradılır. Təcrid olunmuş komponentdə bu nəzərə çarpmır, lakin yüzlərlə elementi olan LazyColumn-da əlavə alokasiyalar sürüşdürmədə nəzərə çarpan ləngimələrə səbəb olur.

Qayda: modifikatorlar zənciri Composable funksiyasının parametrlərindən asılı deyilsə — onu val olaraq funksiyadan kənarda (fayl səviyyəsində və ya Companion-da) elan edin. Əgər asılıdırsa — remember(asılılıq) { ... } istifadə edin. Həmişə eyni olan modifikatorlar üçün ən effektiv yol Composable-dən kənarda val-dır: belə obyektlər tətbiqin bütün ömrü boyu bir dəfə yaradılır.

Modifier sıralaması üzrə ən yaxşı təcrübələr: modifikatorları məntiqi ardıcıllıqla yerləşdirin: əvvəlcə ölçü/boşluqlar (layout), sonra dekorasiya (background, border), daha sonra davranış (clickable, pointerInput). Bu, təkcə oxunaqlılığı yaxşılaşdırmır, həm də Compose Runtime-a ölçmə mərhələsində zənciri optimallaşdırmağa kömək edir. Həmçinin müxtəlif Modifier-lərlə çoxlu iç-içə Box-lardan çəkinin — çox vaxt valideyn konteynerində bir Modifier 2-3 iç-içə olanı əvəz edə bilər.

kotlin
// ✅ Yaxşı: Composable-dən kənarda sabit
private val cardModifier = Modifier
    .fillMaxWidth()
    .padding(16.dp)
    .clip(RoundedCornerShape(8.dp))

@Composable
fun CardContent() {
    Box(cardModifier.background(Color.White)) { ... }
}

// ❌ Pis: hər rekompozisiyada yenidən yaradılma
@Composable
fun BadCard() {
    Box(Modifier.fillMaxWidth().padding(16.dp)) { ... }
}

// ✅ Yaxşı: dinamik Modifier üçün remember
@Composable
fun DynamicCard(color: Color) {
    val modifier = remember(color) {
        Modifier.fillMaxWidth().background(color)
    }
    Box(modifier) { ... }
}

Tez-tez verilən suallar

Bir Modifier-i bir neçə Composable üçün istifadə etmək olar?

Bəli, Modifier dəyişməz olduğu üçün bir obyekti bir neçə yerdə təhlükəsiz istifadə etmək olar. Ancaq composed-modifikatoru istifadə edirsinizsə, hər çağırış yeni nümunə yaradır. Statik zəncirlər üçün sabit və ya Composable-dən kənarda val optimal həll yoludur.

Modifikatorlar zəncirini necə debug etmək olar?

Android Studio-da Layout Inspector istifadə edin — hər Modifier-in sərhədlərini vizual olaraq göstərir. Proqram debug üçün zəncirin hər addımında müxtəlif rənglərlə Modifier.border() əlavə edin ki, hər modifikatorun tətbiq sərhədlərini görəsiniz.

Modifier.then() nədir və ardıcıl çağırışdan nə ilə fərqlənir?

Modifier.then(other) other zəncirini this-ə birləşdirir. Ardıcıl çağırış (Modifier.a().b()) Modifier.then(a()).then(b()) ilə eynidir. Fərq yoxdur — bu eyni zəncir mexanizmidir. then() dəyişəndən hazır zənciri birləşdirmək lazım olduqda faydalıdır.

Modifier Accessibility semantikasına necə təsir edir?

Modifier.semantics {} elementin ekran oxuyucusu üçün necə təsvir ediləcəyini müəyyən edir. Modifier.clickable() avtomatik olaraq Button rolu və Action(OnClick) əlavə edir. Xüsusi jestlər üçün semantics açıq şəkildə göstərilməlidir. Semantik modifikatorlar olmadan TalkBack istifadəçiləri xüsusi komponentlərlə qarşılıqlı əlaqə qura bilməyəcəklər.

Niyə Modifier-də background yumru künclərlə işləmir?

Modifier.background(color, shape) künclərlə işləyir, lakin künclərin kəsilməsi üçün clip() background-dan ƏVVƏL gəlməlidir. Düzgün sıralama: clip(shape).background(color). Əgər daxildəki məzmunu da kəsmək lazımdırsa, valideyndə clipToBounds() istifadə edin.

Nəticə

  • Modifier — görünüşü və davranışı deklarativ təsvir etmək üçün dəyişməz obyekt
  • Sıralama modifikatorların nəticəsini müəyyən edir: padding → clickable vs clickable → padding
  • Zəncir ardıcıl qurulur, hər element əvvəlkini sarır
  • Modifier.composed vəziyyət və CompositionLocal ilə modifikatorlar yaratmağa imkan verir
  • Performans: statik zəncirləri sabitlərə çıxarın, dinamiklər üçün remember istifadə edin
  • Semantika: Modifier.semantics xüsusi komponentlərin Accessibility-si üçün məcburidir
  • Tövsiyə: modifikatorları layout-dan dekorasiyaya, sonra davranışa yerləşdirin

Açar təslim mobil tətbiq hazırlayacağıq

IT Sectr 2017-ci ildən startaplar və bizneslər üçün iOS və Android tətbiqləri yaradır. Sizə məsləhət verəcəyik və ən yaxşı həlli təklif edəcəyik.

Layihəni müzakirə et

Həm də oxuyun