Modifier — Jetpack Compose-dagi o'zgarmas obyekt bo'lib, UI komponentining xususiyatlarini belgilaydi: o'lcham, chekinishlar, fon, imo-ishoralarni qayta ishlash va xatti-harakat. Modifikatorlar ketma-ket chaqiruv orqali zanjirga birlashtiriladi va ularni qo'llash tartibi natijaga jiddiy ta'sir qiladi. Google Android Developers, 2026 ma'lumotlariga ko'ra, Modifier-dan to'g'ri foydalanish deklarativ UI-da moslashuvchan va samarali interfeys qurishning asosidir.
Asosiy fikrlar
Modifier — androidx.compose.ui paketidagi interfeys bo'lib, Composite naqshini amalga oshiradi. Har bir modifikator zanjirning elementi bo'lib, oldingisini o'rab oladi va o'z xatti-harakatini qo'shadi. Modifier o'zgarmasdir — har qanday o'zgarish zanjirga yangi element qo'shilgan holda nusxalash orqali yangi obyekt yaratadi. Bu bitta Modifier-ni bir nechta komponentlar o'rtasida xavfsiz taqsimlash imkonini beradi.
Asosiy modifikator-funksiyalar Modifier hamroh obyekti orqali chaqiriladi (masalan, Modifier.padding(), Modifier.fillMaxWidth()). Har bir funksiya qo'shilgan element bilan yangi Modifier qaytaradi. Agar bir nechta modifikator bo'lsa, ular zanjirda birlashadi: Modifier.padding(16.dp).fillMaxWidth().background(Color.Blue). Tartib UI elementiga nisbatan tashqaridan ichkariga yo'nalishdir.
An'anaviy View-lardan farqli o'laroq, bu erda xususiyatlar setter-lar (view.setPadding(...), view.setBackground(...)) orqali o'rnatilgan, Compose-da Modifier deklarativ tavsifdir. Komponent ish vaqtida modifikatorlarni "qo'llamaydi" — LayoutNode kompozitsiya bosqichida Modifier zanjiridan o'tadi va undan Modifier.Element ro'yxatini yig'adi, keyin ular o'lchash va joylashtirish bosqichida qayta ishlanadi.
Modifikatorlarning tartibi — Compose-dagi eng keng tarqalgan xatolardan biri. Har bir modifikator oldingisini o'rab oladi va operatsiyalar tashqaridan ichkariga bajariladi. Masalan, padding(16.dp).clickable { }: avval element atrofida chekinish qo'shiladi, keyin bosish maydoni chekinishni ham o'z ichiga oladi. clickable { }.padding(16.dp): avval bosish maydoni element o'lchamiga teng, keyin chekinish atrofga qo'shiladi — chekinishni bosish ishlamaydi.
Yodda saqlash qoidasi: zanjirni chapdan o'ngga o'qing va tashqaridan ichkariga qo'llang. Birinchi modifikator — eng tashqi, element atrofidagi maydonga qo'llaniladi. Oxirgi — eng ichki, to'g'ridan-to'g'ri mazmunga qo'llaniladi. O'lcham modifikatorlari (size, fillMaxWidth) chekinishlardan keyin kelishi kerak, agar chekinish ota-onadan kerak bo'lsa, yoki chekinishlardan oldin, agar mazmun avval cheklanishi, keyin markazlashtirilishi kerak bo'lsa.
Misol: size(100.dp).padding(10.dp) — qattiq o'lchamdagi element 100dp, keyin tashqaridan padding 10dp (yakuniy o'lcham 120dp). padding(10.dp).size(100.dp) — padding 10dp mavjud maydonni (ota-ona - 20dp) ga kamaytiradi, keyin size(100dp) ota-onani to'ldirib yuborishi mumkin. Har doim tartibni ongli ravishda o'ylab ko'ring, natijani tekshirish uchun displey testlaridan foydalaning.
| Tartib | Natija |
|---|---|
| padding → clickable | Bosish chekinish maydonida ham ishlaydi |
| clickable → padding | Bosish faqat mazmunda ishlaydi, chekinish — o'lik zona |
| size → padding | Element size(100), tashqaridan padding → 100+2*pad |
| padding → size | padding joyni kamaytiradi, size chegaralardan chiqib ketishi mumkin |
| background → padding | Fon tashqi maydonni ham o'z ichiga olgan holda butun elementni to'ldiradi |
| padding → background | Fon faqat chekinish ichida (tashqi maydon shaffof) |
Standart Compose kutubxonasi ~50+ modifikatorni o'z ichiga oladi, toifalarga bo'lingan. O'lcham va joylashish: Modifier.size(), width(), height(), fillMaxSize(), fillMaxWidth(), fillMaxHeight(), defaultMinSize(), requiredSize(). Chekinishlar va chegaralar: padding(), offset(), margin (ota-onaning paddingi yoki Layout orqali joylashtiriladi). Bezak: background(), border(), clip(), alpha(), shadow(), blur().
Xatti-harakat va imo-ishoralar: clickable(), combinedClickable(), pointerInput(), draggable(), swipeable(). Konternerda joylashtirish: weight() (Row/Column uchun), align(), alignBy(), matchParentSize(). Semantika va foydalanish imkoniyati: semantics(), testTag(), clearAndSetSemantics(). Chizish: drawBehind(), drawWithContent(), drawModifier() — kanvada maxsus chizish imkonini beruvchi modifikatorlar.
Semantik modifikatorlar — alohida toifa. Modifier.semantics {} elementning Accessibility daraxtida qanday taqdim etilishini belgilaydi. Compose matndan semantikani avtomatik to'ldiradi, ammo maxsus komponentlar uchun rollar, holatlar va harakatlarni qo'lda belgilash kerak. Bu WCAG 2.2 ga muvofiqligi va TalkBack (Android) va VoiceOver (iOS) ning to'g'ri ishlashi uchun juda muhimdir.
@Composable
fun ModifierDemo() {
// To'g'ri tartib bilan modifikatorlar zanjiri
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("Menga teging")
}
}
Modifier.composed — boshqa modifikatorlardan, LocalComposition va lokal holatdan foydalana oladigan murakkab modifikatorlarni yaratishga imkon beruvchi fabrika usuli. Oddiy kengaytma funksiyasidan farqli o'laroq, composed har bir qo'llashda bir nusxa yaratadi, bu modifikator ichida o'z holatiga ega bo'lish imkonini beradi.
Composed qachon ishlatiladi: takrorlanuvchi kombinatsiyalar (masalan, standart karta uslubi: padding + background + border + clickable); holatli modifikatorlar (bosilganda animatsion fon o'zgarishi); CompositionLocals-ga kirish (MaterialTheme rang sxemasi, piksel zichligi). Oddiy hollarda composed-siz oddiy kengaytma funksiyasi yetarli.
Composed unumdorligi: har bir chaqiruv yangi modifikator obyektini yaratadi, bu rekombinatsiyada qo'shimcha alokatsiyalarga olib kelishi mumkin. Buning oldini olish uchun composed-ni remember bilan o'rab oling. Google composed-dan faqat ichkarida haqiqatan holat yoki CompositionLocal kerak bo'lganda foydalanishni tavsiya qiladi. Statik kombinatsiyalar uchun oddiy kengaytma funksiyalaridan foydalaning.
// Holat bilan composed orqali maxsus 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))
}
// Foydalanish misoli
@Composable
fun CardList() {
Column {
Box(Modifier.cardStyle()) { Text("Element 1") }
Box(Modifier.cardStyle(isSelected = true)) { Text("Tanlandi") }
}
}
// Statik versiya (composed holda) — tezroq
fun Modifier.simpleCardStyle(): Modifier =
this.fillMaxWidth().padding(8.dp).clip(RoundedCornerShape(4.dp))
Har bir rekombinatsiyada Modifier-ni qayta yaratishdan saqlaning. Agar modifikator o'zgaruvchan ma'lumotlarga bog'liq bo'lmasa — uni doimiyga yoki remember-ga chiqaring. Har safar Modifier.padding().background() chaqirilganda yangi Modifier.Element obyektlari yaratiladi. Izolyatsiya qilingan komponentda bu sezilmaydi, lekin yuzlab elementli LazyColumn-da qo'shimcha alokatsiyalar aylantirishda sezilarli kechikishlarga sabab bo'ladi.
Qoida: agar modifikatorlar zanjiri Composable funksiyasining parametrlariga bog'liq bo'lmasa — uni val sifatida funksiyadan tashqarida (fayl darajasida yoki Companion-da) e'lon qiling. Agar bog'liq bo'lsa — remember(bog'liqlik) { ... } dan foydalaning. Har doim bir xil bo'lgan modifikatorlar uchun eng samarali usul Composable-dan tashqarida val: bunday obyektlar ilovaning butun ishlash muddati davomida bir marta yaratiladi.
Modifier tartibi bo'yicha eng yaxshi amaliyotlar: modifikatorlarni mantiqiy tartibda joylashtiring: avval o'lcham/chekinishlar (layout), keyin bezak (background, border), so'ngra xatti-harakat (clickable, pointerInput). Bu nafaqat o'qish qulayligini yaxshilaydi, balki Compose Runtime-ga o'lchash bosqichida zanjirni optimallashtirishga yordam beradi. Shuningdek, turli Modifier-lar bilan ortiqcha ichma-ich Box-lardan saqlaning — ko'pincha ota-ona konteyneridagi bitta Modifier 2-3 ichma-ichni almashtirishi mumkin.
// ✅ Yaxshi: Composable dan tashqarida doimiy
private val cardModifier = Modifier
.fillMaxWidth()
.padding(16.dp)
.clip(RoundedCornerShape(8.dp))
@Composable
fun CardContent() {
Box(cardModifier.background(Color.White)) { ... }
}
// ❌ Yomon: har bir rekombinatsiyada qayta yaratish
@Composable
fun BadCard() {
Box(Modifier.fillMaxWidth().padding(16.dp)) { ... }
}
// ✅ Yaxshi: dinamik Modifier uchun remember
@Composable
fun DynamicCard(color: Color) {
val modifier = remember(color) {
Modifier.fillMaxWidth().background(color)
}
Box(modifier) { ... }
}
Ko'p beriladigan savollar
Ha, Modifier o'zgarmas, shuning uchun bitta obyektni bir nechta joyda xavfsiz ishlatish mumkin. Ammo composed-modifikatoridan foydalansangiz, har bir chaqiruv yangi nusxa yaratadi. Statik zanjirlar uchun doimiy yoki Composable-dan tashqarida val optimal yechimdir.
Android Studio-da Layout Inspector dan foydalaning — har bir Modifier chegaralarini vizual ko'rsatadi. Dasturiy tuzatish uchun zanjirning har bir qadamida turli ranglar bilan Modifier.border() qo'shing, har bir modifikatorning qo'llanish chegaralarini ko'rish uchun.
Modifier.then(other) other zanjirini this-ga birlashtiradi. Ketma-ket chaqirish (Modifier.a().b()) Modifier.then(a()).then(b()) bilan teng. Farqi yo'q — bu bir xil zanjir mexanizmi. then() o'zgaruvchidan tayyor zanjirni birlashtirish kerak bo'lganda foydali.
Modifier.semantics {} elementning ekran o'quvchisi uchun qanday tasvirlanishini belgilaydi. Modifier.clickable() avtomatik ravishda Button rolini va Action(OnClick) qo'shadi. Maxsus imo-ishoralar uchun semantics ni aniq ko'rsatish kerak. Semantik modifikatorlarsiz TalkBack foydalanuvchilari maxsus komponentlar bilan o'zaro aloqa qila olmaydi.
Modifier.background(color, shape) burchaklar bilan ishlaydi, lekin clip() background-dan OLDIN kelishi kerak, burchaklarni kesish uchun. To'g'ri tartib: clip(shape).background(color). Agar ichidagi mazmunni ham kesish kerak bo'lsa, ota-onada clipToBounds() dan foydalaning.
Xulosa
Biz kalit topshirig'i bilan mobil ilovani ishlab chiqamiz
IT Sectr 2017-yildan beri startaplar va korxonalar uchun iOS va Android ilovalarini yaratadi. Biz sizga maslahat beramiz va eng yaxshi yechimni taklif qilamiz.