Published on: Monday, February 2, 2026

Safe area va ignoresSafeArea()

Authors

Name
ShoxruxC
@iOSdasturchi

Zamonaviy iPhone'larda ekranning ba'zi joylari jismonan kesib kirilgan (Dynamic Island, yon tirqish) yoki tizim tomonidan band qilingan (pastki home indicator, yuqoridagi status bar). SwiftUI bu hududlarni safe area deb ataydi — va odatda tarkibingiz uning ichida qoladi.

Bu standart holat yaxshi. U tugmalaringizning home indicator ortida yashirib qolishini va matnIngizning status bar soati bilan qoplanishini oldini oladi. Lekin ba'zida ataylab chiqib ketish kerak bo'ladi — masalan, fon rangini yoki rasmni ekranning chekkalarigacha cho'zish uchun. .ignoresSafeArea() modifikatori buni amalga oshirish imkonini beradi.

Bu yerdagi muhim fikr: .ignoresSafeArea() view-ning frame-ini safe area hududlarini qamrab olish uchun kengaytiradi — lekin tarkibingizni u hududlarga ko'chirishingiz shart emas. Status bar ortiga fondni cho'zib, matnni safe area ichida ushlab turishingiz mumkin.

Swift•

ContentView.swift

import SwiftUI

struct ContentView: View {
var body: some View {
ZStack {
// Fon status bar va home indicator ortiga kengayadi
Color.indigo
.ignoresSafeArea()

          // Tarkib odatda safe area ichida qoladi
          VStack {
              Text("To'liq ekran fon")
                  .foregroundStyle(.white)
                  .font(.title)
              Spacer()
              Text("Tarkib xavfsiz zonada")
                  .foregroundStyle(.white.opacity(0.7))
          }
          .padding()
      }
  }

}

ignoresSafeArea() variantlari

.ignoresSafeArea(.keyboard) — klaviatura tarkibni siljitmasin

TextField("Qidirish", text: $searchText)
    .textFieldStyle(.roundedBorder)
    .padding()
    // Klaviatura bu text field konteynerini yuqoriga siljitishini oldini oladi
    .ignoresSafeArea(.keyboard)

Odatda SwiftUI klaviatura paydo bo'lganda fokusli matn maydonlarini ko'rinib turishini ta'minlash uchun tarkibni yuqoriga siljitadi. .ignoresSafeArea(.keyboard) konteynerta bu xatti-harakatni o'chiradi — klaviatura qochishini o'zingiz boshqarganingizda foydali.

Ma'lum chetlar — faqat ba'zi safe area chetlarini e'tiborsiz qoldirish

Color.blue
    // Faqat yuqori chetni (status bar / Dynamic Island) e'tiborsiz qoldiradi
    .ignoresSafeArea(edges: .top)

Qaysi safe area chetlarini e'tiborsiz qoldirishni cheklash uchun edges: parametrini bering. Variantlar: .top, .bottom, .leading, .trailing, .horizontal, .vertical, .all.

safeAreaInset() — safe area chetigida suzib yuruvchi kontent

ScrollView {
    LazyVStack {
        /* ro'yxat tarkibi */
    }
}
// Pastki safe area ustida suzib yuruvchi tugma qo'shadi
.safeAreaInset(edge: .bottom) {
    Button("Yaratish") { }
        .buttonStyle(.borderedProminent)
        .padding()
}

.safeAreaInset() safe area chetigida view joylashtiradi va hech narsa suzuvchi overlay ortida yashirib qolmasligi uchun asosiy tarkibga avtomatik bo'sh joy qo'shadi. Bu scroll view ustiga suzib yuruvchi harakat tugmasi yoki toolbar qo'shishning to'g'ri usuli.

Swift•

FloatingButtonView.swift

import SwiftUI

struct FloatingButtonView: View {
var body: some View {
ScrollView {
LazyVStack(spacing: 1) {
ForEach(1...30, id: \.self) { i in
Text("Element \(i)")
.frame(maxWidth: .infinity, alignment: .leading)
.padding()
.background(.white)
}
}
}
.background(Color(.systemGroupedBackground))
.safeAreaInset(edge: .bottom) {
Button("Yangi yaratish") { }
.buttonStyle(.borderedProminent)
.frame(maxWidth: .infinity)
.padding()
.background(.thinMaterial)
}
}
}

Tezkor ma'lumotnoma

Modifikator	Vazifasi
`.ignoresSafeArea()`	View-ni barcha safe area hududlari ortiga kengaytiradi
`.ignoresSafeArea(edges: .top)`	Faqat ma'lum chet(lar)da safe area-ni e'tiborsiz qoldiradi
`.ignoresSafeArea(.keyboard)`	Klaviatura tarkibni siljitishini oldini oladi
`.safeAreaInset(edge:)`	Safe area chetigida overlay kontent qo'shadi va avtomatik bo'sh joy yaratadi

Topshiriq: to'liq qoplamali gradient sarlavha

Yuqorida to'liq qoplamali gradient sarlavhali ekran yarating. ZStack ishlatilsin: .purple dan .indigo gacha LinearGradient fon .ignoresSafeArea(edges: .top) yordamida status bar ortiga cho'zilsin va ustida katta oq sarlavha va taglavha bo'lgan VStack joylashsin. Sarlavha maydonidan pastda kulrang fonda bir nechta oq kontent qatori bo'lsin. Canvas-da tekshiring — gradient status bar bilan birga ekranning yuqorisigacha to'lib turishi kerak.