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 — 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ı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ıralama | Nəticə |
|---|---|
| padding → clickable | Klik boşluq sahəsində də işləyir |
| clickable → padding | Klik yalnız məzmunda işləyir, boşluq — ölü zona |
| size → padding | Element size(100), kənardan padding → 100+2*pad |
| padding → size | padding yeri azaldır, size sərhədləri aşa bilər |
| background → padding | Fon xarici sahə də daxil olmaqla bütün elementi doldurur |
| padding → background | Fon yalnız boşluq daxilindədir (xarici sahə şəffafdır) |
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.
@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 — 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.
// 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))
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.
// ✅ 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
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.
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(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.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.
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ə
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.
Həm də oxuyun