SwiftUI-da SafeAreaInset — safe area ichiga element qo'yish (iOS 16+)

Bu qisqa video. Safe area-ni avval alohida videoda ko'rib chiqqanmiz — bu uni o'zgartirmaydi. .safeAreaInset esa safe area ichiga ataylab element qo'yish uchun iOS 16 da kelgan yangi modifier. Keng tarqalgan emas, lekin bilish kerak.

Asosiy sozlama

struct SafeAreaInsetBootcamp: View {
    var body: some View {
        NavigationStack {
            List {
                ForEach(0..<10) { _ in
                    Rectangle()
                        .frame(height: 300)
                }
            }
            .navigationTitle("Safe Area Insets")
        }
    }
}

Muammo — pastki safe area-ga element qo'yish

Avvalgi usul — overlay bilan:

NavigationStack {
    List { ... }
    .overlay(alignment: .bottom) {
        Text("Salom!")
            .frame(maxWidth: .infinity)
            .background(Color.yellow)
    }
}

Bu ham ishlaydi. .safeAreaInset esa yangi va soddaroq yo'l.

safeAreaInset — yangi usul

NavigationStack {
    List { ... }
    .navigationTitle("Safe Area Insets")
    .safeAreaInset(edge: .bottom, alignment: .center, spacing: nil) {
        Text("Salom!")
            .frame(maxWidth: .infinity)
            .background(Color.yellow)
    }
}

Natija avvalgi overlay usuli bilan bir xil, lekin qurilmalar orasida biroz ko'proq moslashuvchan.

Alignment — joylashtirish

// Markazda (standart)
.safeAreaInset(edge: .bottom, alignment: .center) {
    Text("Markaz")
        .background(Color.yellow)
}

// Chapda
.safeAreaInset(edge: .bottom, alignment: .leading) {
    Text("Chap")
        .padding()
        .background(Color.yellow)
        .clipShape(Circle())
}

// O'ngda
.safeAreaInset(edge: .bottom, alignment: .trailing) {
    Text("O'ng")
        .padding()
        .background(Color.yellow)
        .clipShape(Circle())
}

Chapga yoki o'ngga joylashtirib, ustiga padding va clipShape(Circle()) qo'shsangiz — pastki burchakda suzib turuvchi doira tugma hosil bo'ladi. Ilovalarning ko'pida shu ko'rinishni uchratish mumkin.

Yuqori safe area — .top

NavigationStack {
    List { ... }
    .navigationBarTitleDisplayMode(.inline)
    .navigationTitle("Safe Area Insets")
    .safeAreaInset(edge: .top) {
        Text("Pinned sarlavha")
            .frame(maxWidth: .infinity)
            .background(Color.yellow)
    }
}

.top edge-i navigatsiya sarlavhasi ostiga element qo'yadi. Scroll qilganda element o'sha yerda qoladi — xuddi pinned header kabi. LazyVStack bilan pinnedViews-ni eslatadi, lekin bu yanada sodda.

overlay va safeAreaInset taqqoslov

// Eski usul — overlay
.overlay(alignment: .bottom) {
    Text("Salom!")
        .frame(maxWidth: .infinity)
        .background(Color.yellow)
}
// Safe area-ni o'zingiz boshqarishingiz kerak
// ignoresSafeArea qo'shish/qo'shmaslikni o'ylash kerak

// Yangi usul — safeAreaInset
.safeAreaInset(edge: .bottom) {
    Text("Salom!")
        .frame(maxWidth: .infinity)
        .background(Color.yellow)
}
// Safe area avtomatik hisobga olinadi
// Kod qisqaroq va tushunarli

Xulosa

.safeAreaInset ilgari ham qilish mumkin bo'lgan narsani — faqat soddaroq qiladi. overlay + ignoresSafeArea kombinatsiyasini o'zingiz boshqarish o'rniga, modifier buni avtomatik hal qiladi.

Keng tarqalgan emas, lekin pastki yoki yuqori safe area-ga suzib turuvchi tugma, filter paneli yoki pinned sarlavha qo'yish kerak bo'lganda qulay.

Rahmat, men Nick, bu Swiftful Thinking va keyingi videoda ko'rishguncha!