Published on: Sunday, January 18, 2026

Modifikatorlar — viewlarni jihozlash

Authors

Name
ShoxruxC
@iOSdasturchi

Hozircha, sizning viewlaringiz mavjud — lekin ular juda oddiy ko'rinadi. Matn standart o'lchamda, tugma jihozlanmagan va rasm mitti. Aynan shu joyda modifikatorlar (modifiers) yordamga keladi. Modifikatorlar orqali siz SwiftUI-da viewlarni jihozlaysiz va sozlaysiz va ular freymvorkdagi eng kuchli g'oyalardan biridir.

Agar siz veb-dasturlashda CSS-dan foydalangan bo'lsangiz, modifikatorlar sizga juda tanish tuyuladi. Agar foydalanmagan bo'lsangiz, quyidagi o'xshashlikni keltiramiz: modifikatorni sifat (adjective) kabi tasavvur qiling. Oddiy ot — "tugma". Modifikatorlarni qo'shganingizda u "katta, qalin shriftdagi, ko'k, padding'ga (bo'sh joy) ega bo'lgan yumaloq tugma"ga aylanadi. Har bir modifikator ko'rinishga bitta xususiyat qo'shadi va siz o'zingizga kerakligicha ularni zanjir kabi ulab ketishingiz mumkin.

Ushbu darsning oxiriga kelib, siz modifikatorlarni ishonch bilan zanjirlashni o'rganasiz, modifikatorlarning qo'llanilish tartibi nima uchun muhimligini tushunib olasiz va eng ko'p ishlatiladigan modifikatorlar: .font(), .foregroundStyle(), .padding(), .background(), .cornerRadius() va .frame()ni qo'llay olasiz.

Modifikatorlar qanday ishlaydi

Modifikator — bu viewdan keyin nuqta yozish orqali chaqiriladigan metoddir. U yangi, o'zgartirilgan view'ni qaytaradi. Yana bitta nuqta qo'shish orqali bir nechta modifikatorlarni zanjir kabi ulab ketishingiz mumkin. Quyida oddiy misol keltirilgan:

Swift•

Modifikatorlarning zanjirlanishi

// Oddiy Text ko'rinishidan boshlaymiz
Text("Salom, SwiftUI!")
  // Shriftni katta va qalin qilamiz
  .font(.largeTitle)
  .fontWeight(.bold)
  // Matn rangini ko'k rangga o'zgartiramiz
  .foregroundStyle(.blue)
  // Matn atrofida bo'sh joy (padding) qoldiramiz
  .padding()

Qator	U nima vazifa bajaradi
`Text("Hello, SwiftUI!")`	Standart jihozga ega bo'lgan asosiy matn ko'rinishini yaratadi.
`.font(.largeTitle)`	Shriftni Apple tizimiga o'rnatilgan "largeTitle" uslubiga o'zgartiradi — bu sarlavhalar uchun ishlatiladigan katta, ko'zga tashlanadigan o'lchamdir.
`.fontWeight(.bold)`	Shriftni qalin (bold) qiladi. Shuningdek `.semibold`, `.medium`, `.light` va boshqalardan foydalanish mumkin.
`.foregroundStyle(.blue)`	Matn rangini kok rangga o'rnatadi. Bu SwiftUI-da rang berishning zamonaviy usuli hisoblanadi (eski `.foregroundColor` o'rniga kelgan).
`.padding()`	Tizim standartidagi padding qiymatidan foydalangan holda ko'rinishning to'rttala tomoniga teng miqdorda bo'sh joy qo'shadi.

⚠️ Tartib juda muhim:
Modifikatorlar ketma-ketlikda, tepadan pastga qarab qo'llaniladi. .background(.yellow)dan oldin qo'llanilgan .padding() sizga padding'ni ham o'z ichiga olgan sariq rangli orqa fonni beradi. Tartibni teskari qilsangiz, sariq fon faqat matnning o'zini qoplaydi — padding esa orqa fondan tashqarida qoladi. Bu ko'plab yangi boshlovchilarni chalg'itadi. Agar biror narsa noto'g'ri ko'rinsa, modifikatorlaringiz tartibini o'zgartirib ko'ring.

Eng asosiy modifikatorlar

.font()Tizimdagi tayyor semantik o'lchamlardan foydalangan holda matn o'lchami va uslubini o'rnatadi.

Swift•

font modifikatori o'lchamlari

// Tizimdagi tayyor shrift uslublari foydalanuvchining accessibility sozlamalariga qarab avtomatik moslashadi
Text("Katta sarlavha").font(.largeTitle)
Text("Sarlavha").font(.title)
Text("Bosh sarlavha").font(.headline)
Text("Asosiy").font(.body)
Text("Izoh").font(.caption)

Aniq belgilangan nuqta (point) o'lchamlari o'rniga .largeTitle, .title, .headline, .body va .caption kabi semantik o'lchamlardan foydalaning. Bular foydalanuvchining Dynamic Type sozlamalarini hurmat qiladi, shunda sizning ilovangiz hamma uchun qulay (accessible) bo'lib qoladi.

.foregroundStyle()Matn yoki ikonkalarning rangini belgilaydi.

// Tizimdagi tayyor Color qiymatlari yordamida matn rangini o'rnatamiz
Text("Okean").foregroundStyle(.blue)
Text("Olov").foregroundStyle(.orange)
Text("Ikkinchi darajali").foregroundStyle(.secondary)

.foregroundStyle() — SwiftUI-da matn rangini o'rnatishning zamonaviy usuli. .secondary rangi juda foydali bo'lib, u yorug' (light) va qorong'u (dark) modega avtomatik tarzda moslashadigan xiralashtirilgan rangni beradi.

.padding()Ko'rinish atrofida bo'sh joy qo'shadi.

// Barcha tomonlarda standart padding
Text("Barcha tomonlar").padding()

// Barcha tomonlarda shaxsiy o'lchamdagi padding
Text("O'zlashtirish miqdori").padding(20)

// Faqat ma'lum bir tomonlarda padding qoldirish
Text("Faqat yuqori").padding(.top, 16)

Hech qanday argumentsiz chaqirilgan .padding() barcha tomonlarga tizim standartidagi bo'sh joy miqdorini qo'shadi — odatda 16 point. Aniq miqdorni belgilash uchun raqam uzating. Muayyan tomonlarni nishonga olish uchun .top, .bottom, .leading yoki .trailing kabi yo'nalishlarni uzating.

.background()Ko'rinishning orqa tomoniga rang yoki boshqa ko'rinishni o'rnatadi.

// Sariq orqa fon faqat matn maydonini qoplaydi
Text("Ta'kidlangan")
    .background(.yellow)

// background'dan oldin padding qo'shilsa, rangli maydon kengayadi
Text("Padding bilan")
    .padding()
    .background(.yellow)

Bu yerda modifikatorlar tartibi o'zining haqiqiy ta'sirini ko'rsatadi. .background() o'zi qo'llanilgan ko'rinishning butun maydonini to'ldiradi — bu maydon undan oldin kelgan modifikatorlarga qarab o'zgaradi. Background'dan oldin padding = kattaroq fon. Padding'dan oldin background = torroq fon.

.cornerRadius()Ko'rinishning burchaklarini yumaloq qiladi.

Swift•

Yumaloq burchakli dizayn

// padding, background va cornerRadius modifikatorlarini birga ishlatish orqali chiroyli tugma dizayni
Text("Boshlash")
  .padding()
  .background(.blue)
  .foregroundStyle(.white)
  .cornerRadius(12)

.padding(), .background() va .cornerRadius() modifikatorlarini birlashtirib, siz hech qanday chizish ishlarisiz professional ko'rinishdagi tugmani yaratishingiz mumkin. Tugmalar uchun 8 dan 16 gacha bo'lgan radius odatiy hisoblanadi; kattaroq qiymatlar esa kapsulasimon (pill-shape) shakllarni hosil qiladi.

.frame()Ko'rinish uchun aniq kenglik va balandlikni belgilaydi.

// Ruxsat etilgan qat'iy o'lcham
Color.blue
    .frame(width: 100, height: 100)

// To'liq kenglik, qat'iy balandlik
Color.green
    .frame(maxWidth: .infinity, height: 50)

.frame() aniq o'lchamlarni o'rnatadi. Ruxsat etilgan qat'iy o'lchamlar uchun width: va height: parametrlaridan foydalaning. Ko'rinishni barcha gorizontal maydonni egallashga majburlash uchun maxWidth: .infinity qiymatidan foydalaning — bu to'liq kenglikdagi tugmalar va fonlar yaratishda juda keng qo'llaniladi.

Tezkor ma'lumotnoma

Modifikator	U nima vazifa bajaradi
`.font(.largeTitle)`	Matn o'lchamini Dynamic Type sozlamalariga mos ravishda belgilaydi
`.fontWeight(.bold)`	Matn qalinligini belgilaydi — bold, semibold, medium, light va h.k.
`.foregroundStyle(.blue)`	Matn yoki ikonka rangini o'rnatadi
`.padding()`	Barcha tomonlarga standart bo'sh joy qo'shadi
`.padding(.top, 16)`	Muayyan tomonga 16pt bo'sh joy qo'shadi
`.background(.yellow)`	Ko'rinish orqasiga fon rangini o'rnatadi
`.cornerRadius(12)`	Burchaklarni berilgan point qiymati bo'yicha yumaloqlaydi
`.frame(width: 100, height: 100)`	Ko'rinish uchun qat'iy o'lcham belgilaydi
`.frame(maxWidth: .infinity)`	Ko'rinishni barcha mavjud kenglikni to'ldirishga kengaytiradi

Sun'iy intellektdan chuqurroq o'rganish uchun foydalanish

1. Tushunchalarni chuqurlashtirish (ai'dan repetitor sifatida foydalaning):

"Men SwiftUI modifikatorlarini o'rganyapman va ularning qo'llanish tartibi muhimligini tushundim. Menga ikki xil modifikatorning tartibi vizual natijani qanday o'zgartirishiga doir 3 ta aniq misol keltira olasizmi? Har bir holatda ekranda nima ko'rinishini batafsil tasvirlab bering."
"SwiftUI-da .foregroundColor() va .foregroundStyle() modifikatorlari orasidagi farq nima? Nima uchun Apple .foregroundStyle modifikatoriga o'tdi? Qachon qaysi biridan foydalanishim kerak?"

2. Amaliy ko'rinish yaratish (xcode-da sinab ko'rish uchun):

"Text ko'rinishi va Button tugmasini jihozlash uchun kamida 6 xil modifikatordan foydalangan holda SwiftUI ContentView yozib bering. Har bir modifikatorning tepasida u nima ish qilishi va zanjirda nima uchun aynan shu o'ringa qo'yilganini tushuntiruvchi izoh yozing. Izohlar modifikatorlar tartibini birinchi marta o'rganayotgan yangi boshlovchi uchun tushunarli bo'lsin."

🎯 Topshiriq: jihozlangan CTA tugmasi (ulanishga chaqirish tugmasi)

Faqat Text va modifikatorlar yordamida (hozircha haqiqiy Button ishlatmasdan), canvas preview'da bosiladigan tugmaga o'xshash ko'rinish yarating. U orqa fon rangiga, yumaloqlangan burchaklarga, oq rangli matnga va yaqqol ko'rinib turadigan padding'ga ega bo'lishi kerak. Haqiqiy ilovalarda ishlatsa bo'ladigan darajada chiroyli ko'rinishga keltiring — shunchaki "button" deb yozilgan ko'k to'rtburchak bo'lib qolmasin. Natijani tekshirish uchun canvas preview'ga qarang.

Swift•

Topshiriq Yechimi

import SwiftUI

struct ContentView: View {
var body: some View {
Text("Boshlash")
.font(.headline)
.fontWeight(.semibold)
.foregroundStyle(.white)
.padding()
.frame(maxWidth: 200)
.background(
LinearGradient(
colors: [.orange, .pink],
startPoint: .topLeading,
endPoint: .bottomTrailing
)
)
.cornerRadius(15)
.shadow(color: .orange.opacity(0.3), radius: 10, x: 0, y: 5)
}
}

💡 Maslahat:
Boshlanishiga ushbu kodni yozib ko'rishingiz mumkin: Text("...").font(.headline).foregroundStyle(.white).padding().background(.blue).cornerRadius(12) keyin esa uni o'zingiz xohlagandek o'zgartiring va moslashtiring.

Tartib muhim: Modifikatorlar ketma-ket, yuqoridan pastga qo'llaniladi. .background(.yellow) dan oldin .padding() qo'llasangiz — sariq fon paddingni ham qamrab oladi. Tartibni o'zgartirsangiz — sariq fon faqat matnni qoplaydi, padding esa undan tashqarida qoladi. Bu ko'plab yangi boshlovchilarni adashtirib qo'yadi. Biror narsa noto'g'ri ko'rinsa, modifikatorlar tartibini almashtiring.