SwiftUI-da Sheet va FullScreenCover — qanday ishlatish kerak

Bu videoda biz Sheet va FullScreenCover haqida gaplashamiz. Sheet — bu pastdan chiqib keladigan va joriy ekran ustiga qoplanadigan yangi ekran. Ko'rinishi juda professional va ilovalarda tez-tez ishlatiladi. FullScreenCover esa xuddi shunday ishlaydi, lekin ekranni to'liq qoplaydi.

Boshlang'ich sozlama — birinchi ekran

struct SheetsBootcamp: View {

    @State var showSheet: Bool = false

    var body: some View {
        ZStack {
            // Fon
            Color.green
                .edgesIgnoringSafeArea(.all)

            // Tugma
            Button {
                showSheet.toggle()
            } label: {
                Text("Tugma")
                    .foregroundColor(.green)
                    .font(.headline)
                    .padding(20)
                    .background(Color.white.cornerRadius(10))
            }
        }
        .sheet(isPresented: $showSheet) {
            Text("Salom!")
        }
    }
}

Tugma bosilganda showSheet true ga o'zgaradi va .sheet modifikatori pastdan yangi ekranni ko'rsatadi. Foydalanuvchi bu sheet-ni pastga siljitib ham yopishi mumkin.

Ikkinchi ekranni alohida View sifatida yaratish

Haqiqiy ilovalarda ikkinchi ekran odatda alohida faylda bo'ladi. Bu yerda misol uchun bitta faylda yaratamiz:

struct SecondScreen: View {

    @Environment(\.presentationMode) var presentationMode

    var body: some View {
        ZStack(alignment: .topLeading) {
            // Fon
            Color.red
                .edgesIgnoringSafeArea(.all)

            // Yopish tugmasi
            Button {
                presentationMode.wrappedValue.dismiss()
            } label: {
                Image(systemName: "xmark")
                    .foregroundColor(.white)
                    .font(.largeTitle)
            }
            .padding()
        }
    }
}

@Environment(\.presentationMode) — bu SwiftUI-ning maxsus o'zgaruvchisi. U joriy ekranning qanday ko'rsatilayotganini biladi va .dismiss() chaqirilganda to'g'ri usulda yopadi. Bu o'zgaruvchi nomini eslab qolish kerak — avtomatik to'ldirish ishlamaydi.

Sheet ichida ikkinchi ekranni ko'rsatish

struct SheetsBootcamp: View {

    @State var showSheet: Bool = false

    var body: some View {
        ZStack {
            Color.green
                .edgesIgnoringSafeArea(.all)

            Button {
                showSheet.toggle()
            } label: {
                Text("Tugma")
                    .foregroundColor(.green)
                    .font(.headline)
                    .padding(20)
                    .background(Color.white.cornerRadius(10))
            }
        }
        .sheet(isPresented: $showSheet) {
            SecondScreen()
        }
    }
}

Natija: yashil birinchi ekran. Tugma bosilsa qizil ikkinchi ekran pastdan chiqadi. Ikkinchi ekrandagi "X" tugmasi yoki pastga siljitish orqali yopiladi.

Sheet-ni dismiss qilish — presentationMode

Sheet-ni kod orqali yopish uchun ikkinchi ekranga presentationMode qo'shish kerak:

struct SecondScreen: View {

    // Bu qatorni to'liq eslab qoling — autocomplete ishlamaydi
    @Environment(\.presentationMode) var presentationMode

    var body: some View {
        ZStack(alignment: .topLeading) {
            Color.red
                .edgesIgnoringSafeArea(.all)

            Button {
                // Sheet-ni yopish
                presentationMode.wrappedValue.dismiss()
            } label: {
                Image(systemName: "xmark")
                    .foregroundColor(.white)
                    .font(.largeTitle)
            }
            .padding()
        }
    }
}

FullScreenCover — ekranni to'liq qoplash

FullScreenCover xuddi Sheet kabi ishlaydi, lekin ekranni yuqorigacha to'liq qoplaydi va pastga siljitib yopib bo'lmaydi:

struct SheetsBootcamp: View {

    @State var showSheet: Bool = false

    var body: some View {
        ZStack {
            Color.green
                .edgesIgnoringSafeArea(.all)

            Button {
                showSheet.toggle()
            } label: {
                Text("Tugma")
                    .foregroundColor(.green)
                    .font(.headline)
                    .padding(20)
                    .background(Color.white.cornerRadius(10))
            }
        }
        // Sheet o'rniga fullScreenCover
        .fullScreenCover(isPresented: $showSheet) {
            SecondScreen()
        }
    }
}

Sheet va FullScreenCover farqi

Xususiyat	Sheet	FullScreenCover
Ekranni qoplash	Qisman — yuqori chegara ko'rinadi	To'liq — yuqorigacha
Pastga siljitib yopish	Ha	Yo'q
Dismiss	`presentationMode.wrappedValue.dismiss()`	Xuddi shu
Ishlatish	Ko'proq keng tarqalgan	To'liq qoplash kerak bo'lganda

⚠️ Muhim qoidalar

1. Bir view-da faqat bitta sheet

// ❌ NOTO'G'RI — ikki sheet birga ishlamaydi
.sheet(isPresented: $showSheet1) { ... }
.sheet(isPresented: $showSheet2) { ... }

// ✅ TO'G'RI — bitta sheet, bitta fullScreenCover ham emas
.sheet(isPresented: $showSheet) { ... }

2. Sheet ichiga shartli mantiq qo'ymang

// ❌ NOTO'G'RI — bu ishlamas va xatolarga olib keladi
.sheet(isPresented: $showSheet) {
    if someCondition {
        FirstView()
    } else {
        SecondView()
    }
}

// ✅ TO'G'RI — bitta view, kerak bo'lsa ma'lumot uzating
.sheet(isPresented: $showSheet) {
    SecondScreen()
}

Sheet modifikatori view yuklanishi bilanoq kontent yaratadi. Shuning uchun sheet ichidagi shartli mantiq to'g'ri yangilanmaydi va juda ko'p xatolarga sabab bo'ladi. Bu Stack Overflow-da eng ko'p so'raladigan muammolardan biri. Kelajakda bir sheet orqali bir nechta ekranni qanday ko'rsatish haqida alohida video bo'ladi.

Xulosa — 3 ta asosiy narsa

// 1. Sheet qo'shish — @State va binding
@State var showSheet: Bool = false

.sheet(isPresented: $showSheet) {
    SecondScreen()
}

// 2. Sheet-ni yopish — presentationMode
@Environment(\.presentationMode) var presentationMode
presentationMode.wrappedValue.dismiss()

// 3. Aslo sheet ichiga if/else qo'ymang!