SwiftUI-da NavigationSplitView

NavigationView va NavigationStack bitta ekrandan ikkinchisiga o'tish uchun ishlatiladi — yangi ekran joriy ekranni almashtiradi. NavigationSplitView esa bir vaqtning o'zida bir nechta ustun (odatda ikki yoki uchta) ko'rsatish imkonini beradi.

Bu komponent asosan iPad, Mac va kelajakda visionOS ilovalari uchun mo'ljallangan. iPhone-da odatda kerak bo'lmaydi, chunki ekran joyi cheklangan.

Yangi fayl yaratish

Navigatorda o'ng tugma bosib yangi SwiftUI fayli yarating. Uni NavigationSplitViewBootcamp deb nomlang va Create tugmasini bosing.

Ikki ustunli oddiy misol

struct NavigationSplitViewBootcamp: View {
    var body: some View {
        NavigationSplitView {
            Color.red
        } detail: {
            Color.blue
        }
    }
}

• Birinchi closure — sidebar (yon menyu)
• detail — asosiy kontent

iPhone simulyatorida faqat birinchi ekran ko'rinadi. NavigationSplitView iPhone va iPad-da turlicha ishlaydi — iPad-da yon menyu va kontent yonma-yon ko'rinadi, iPhone-da esa odatdagi navigatsiyaga o'xshab ishlaydi.

iPad simulyatorida ko'rsangiz, yuqori chap burchakda menyu tugmasi paydo bo'ladi — u sidebar (qizil qism) ni ochadi.

Uch ustunli misol

struct NavigationSplitViewBootcamp: View {
    var body: some View {
        NavigationSplitView {
            Color.red
        } content: {
            Color.blue
        } detail: {
            Color.green
        }
    }
}

Uchta qism:

• sidebar — birinchi closure (qizil)
• content — ikkinchi qism (ko'k)
• detail — asosiy ekran (yashil)

iPad-da bu uch darajali navigatsiyani hosil qiladi: sidebar → content → detail.

columnVisibility — boshlang'ich holatni boshqarish

NavigationSplitView qaysi ustunlar boshida ko'rinishini sozlash mumkin:

struct NavigationSplitViewBootcamp: View {

    @State private var visibility: NavigationSplitViewVisibility = .automatic

    var body: some View {
        NavigationSplitView(columnVisibility: $visibility) {
            Color.red
        } detail: {
            Color.blue
        }
    }
}

Mumkin bo'lgan qiymatlar

Diqqat: bu faqat ikki ustunli (sidebar + detail) holat uchun ishlaydi. Uch ustunli versiyada hozircha to'liq uch ustunni bir vaqtda majburlash imkoni yo'q.

@State ishlatilishining sababi — foydalanuvchi ustunlar orasida bosib yurganda holat o'zgarib turadi, shuning uchun bog'lanish (binding) kerak.

navigationSplitViewStyle — joylashuv uslubi

NavigationSplitView {
    Color.red
} detail: {
    Color.blue
}
.navigationSplitViewStyle(.balanced)

Stillarni solishtirish

.prominentDetail ishlatilganda menyu detail ekranning chap tomonida emas, balki uning ustida (overlay) ko'rinadi — bu detail ekranni to'liq kenglikda ko'rsatish imkonini beradi.

Haqiqiy ma'lumotlar bilan misol

Endi NavigationSplitView-ni real ma'lumotlar bilan ishlatamiz — oziq-ovqat kategoriyalari va mevalar ro'yxati:

enum FoodCategory: String, CaseIterable {
    case fruits = "fruits"
    case vegetables = "vegetables"
    case meats = "meats"
}

enum Fruit: String, CaseIterable {
    case apple = "apple"
    case banana = "banana"
    case orange = "orange"
}

struct NavigationSplitViewBootcamp: View {

    @State private var visibility: NavigationSplitViewVisibility = .all
    @State private var selectedCategory: FoodCategory? = nil
    @State private var selectedFruit: Fruit? = nil

    var body: some View {
        NavigationSplitView(columnVisibility: $visibility) {
            // Sidebar — kategoriyalar ro'yxati
            List {
                ForEach(FoodCategory.allCases, id: \.self) { category in
                    Button(category.rawValue.capitalized) {
                        selectedCategory = category
                    }
                }
            }
            .navigationTitle("Kategoriyalar")
        } content: {
            // Content — tanlangan kategoriyaga mos elementlar
            if let selectedCategory {
                switch selectedCategory {
                case .fruits:
                    List {
                        ForEach(Fruit.allCases, id: \.self) { fruit in
                            Button(fruit.rawValue.capitalized) {
                                selectedFruit = fruit
                            }
                        }
                    }
                    .navigationTitle(selectedCategory.rawValue.capitalized)
                case .vegetables:
                    EmptyView()
                case .meats:
                    EmptyView()
                }
            } else {
                Text("Kategoriya tanlang")
            }
        } detail: {
            // Detail — tanlangan element haqida ma'lumot
            if let selectedFruit {
                Text("Siz tanladingiz: \(selectedFruit.rawValue.capitalized)")
                    .font(.largeTitle)
                    .navigationTitle(selectedFruit.rawValue.capitalized)
            } else {
                Text("Element tanlang")
            }
        }
    }
}

Ishlash tartibi: foydalanuvchi sidebar-dan kategoriya tanlaydi → content ustunida o'sha kategoriyaga mos elementlar ro'yxati ko'rinadi → element tanlanganda detail ustunida ma'lumot chiqadi.

Bo'sh holatlarni boshqarish

Hech narsa tanlanmagan paytda foydalanuvchiga bo'sh ekran ko'rsatish yomon tajriba hisoblanadi. Shuning uchun har bir ustunda fallback matn berish tavsiya etiladi:

} content: {
    if let selectedCategory {
        // ... kontent
    } else {
        Text("Boshlash uchun kategoriya tanlang")
    }
} detail: {
    if let selectedFruit {
        // ... kontent
    } else {
        Text("Ko'rish uchun biror narsa tanlang")
    }
}

iPhone-da ham ishlatish

NavigationSplitView standart holatda iPhone-da kutilganidek ishlamaydi — oddiy Button orqali tanlangan element keyingi ustunga o'tmaydi. Buning yechimi — List-ning selection parametridan foydalanish:

List(FoodCategory.allCases, id: \.self, selection: $selectedCategory) { category in
    Text(category.rawValue.capitalized)
}

Button o'rniga List-ning o'zini selection: $selectedCategory bilan to'g'ridan-to'g'ri bog'lash kerak. Shunda tanlash iPhone-da ham to'g'ri ishlaydi.

NavigationLink bilan yanada yaxshi natija

Oddiy Button o'rniga NavigationLink(value:) ishlatilganda, tanlangan element vizual ravishda ham ajratib ko'rsatiladi:

List(FoodCategory.allCases, id: \.self, selection: $selectedCategory) { category in
    NavigationLink(category.rawValue.capitalized, value: category)
}

NavigationLink bilan birga List-ning selection bog'lanishi — NavigationSplitView bilan ishlashning eng barqaror kombinatsiyasi.

Cheklovlar

• Maksimal uchta ustun qo'llab-quvvatlanadi — to'rt yoki undan ko'p ustun kerak bo'lsa, o'z maxsus layout-ingizni yozish kerak bo'ladi
• UI sozlamalari cheklangan — asosan List va navigationTitle bilan ishlashga mo'ljallangan, juda maxsus dizayn qiyinroq
• iPhone-da ishlashi uchun qo'shimcha sozlash (List + selection) talab qilinadi

Xulosa

Bu videoda o'rgandik:

• NavigationSplitView — bir vaqtda bir nechta ustunni ko'rsatuvchi navigatsiya komponenti, asosan iPad/Mac uchun
• Ikki yoki uch ustunli versiyalar mavjud (sidebar+detail yoki sidebar+content+detail)
• columnVisibility — .automatic, .doubleColumn, .detailOnly orqali boshlang'ich holatni belgilash
• navigationSplitViewStyle — .balanced yoki .prominentDetail orqali joylashuv uslubini o'zgartirish
• iPhone-da ishlashi uchun List-ning selection parametri va NavigationLink(value:) ishlatilishi kerak
• Maksimal uch ustun, UI sozlamalari cheklangan