SwiftUI-da ContentUnavailableView

ContentUnavailableView — iOS 17 da qo'shilgan yangi komponent bo'lib, foydalanuvchiga "bu yerda kontent mavjud emas" holatini ko'rsatish uchun standart shablon beradi. Bu quyidagi holatlarda ishlatiladi:

• Ma'lumot yuklanishida xatolik yuz berganda
• Foydalanuvchi qidiruv natijasi topilmaganda
• Ro'yxat bo'sh bo'lganda

Yangi fayl yaratish

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

Bu komponent faqat iOS 17 va undan yuqori versiyalarda mavjud.

Oddiy misol

struct ContentUnavailableViewBootcamp: View {
    var body: some View {
        if #available(iOS 17, *) {
            ContentUnavailableView(
                "Sarlavha",
                systemImage: "heart.fill",
                description: Text("Bu yerda matn")
            )
        }
    }
}

Uch qism mavjud:

• Sarlavha — asosiy matn
• systemImage — SF Symbols ikonkasi
• description — qo'shimcha tushuntiruvchi matn (Text turi)

Tayyor versiya — qidiruv natijasi yo'q

Apple "qidiruv natijasi topilmadi" holati uchun tayyor variant ham bergan:

ContentUnavailableView.search

Yoki qidiruv matni bilan birga:

ContentUnavailableView.search(text: searchText)

Bu eng sodda holatda ham "\(searchText)" uchun natija topilmadi kabi matnni avtomatik ko'rsatadi.

Amaliy misol — internet aloqasi yo'q

struct ContentUnavailableViewBootcamp: View {
    var body: some View {
        if #available(iOS 17, *) {
            ContentUnavailableView(
                "Internet aloqasi yo'q",
                systemImage: "wifi.slash",
                description: Text("Iltimos, internetga ulaning va qayta urinib ko'ring")
            )
        }
    }
}

Eski iOS versiyalari uchun moslik

ContentUnavailableView faqat iOS 17+ da mavjud bo'lgani uchun, eski versiyalarni ham qo'llab-quvvatlash kerak bo'lsa, oddiy VStack orqali shu ko'rinishni o'zingiz yaratishingiz mumkin:

struct ContentUnavailableViewBootcamp: View {
    var body: some View {
        if #available(iOS 17, *) {
            ContentUnavailableView(
                "Internet aloqasi yo'q",
                systemImage: "wifi.slash",
                description: Text("Iltimos, internetga ulaning va qayta urinib ko'ring")
            )
        } else {
            VStack(spacing: 12) {
                Image(systemName: "wifi.slash")
                    .font(.system(size: 48))

                Text("Internet aloqasi yo'q")
                    .font(.title2)
                    .bold()

                Text("Iltimos, internetga ulaning va qayta urinib ko'ring")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }
        }
    }
}

Yangi ilovalar uchun ContentUnavailableView ishlatiladi, eski iOS versiyalarini qo'llab-quvvatlash kerak bo'lganda esa yuqoridagi kabi fallback yaratiladi.

Nima uchun bu muhim?

Texnik jihatdan ContentUnavailableView murakkab emas — bu shunchaki ikonka, sarlavha va matndan iborat VStack. Bunday ko'rinishni har qanday dasturchi o'zi ham yaratishi mumkin edi.

Ahamiyati boshqa joyda: Apple bu komponentni barcha ilovalar uchun standart sifatida taklif qilmoqda. Agar ko'plab ilovalar shu bir xil komponentdan foydalansa, foydalanuvchilar bu ko'rinishni tezda tanib oladigan bo'ladi — "bu yerda hech narsa yo'q yoki muammo bor" degan ma'noni avtomatik anglaydi. Bu butun iOS ekotizimida izchil foydalanuvchi tajribasini yaratishga yordam beradi.

Xulosa

Bu videoda o'rgandik:

• ContentUnavailableView — bo'sh yoki xato holatini ko'rsatish uchun standart komponent (iOS 17+)
• Uch asosiy qism: sarlavha, systemImage, description
• ContentUnavailableView.search — qidiruv natijasi yo'qligi uchun tayyor variant
• ContentUnavailableView.search(text:) — qidiruv so'zini ko'rsatish bilan
• Eski iOS versiyalari uchun #available orqali VStack bilan fallback yaratish mumkin
• Bu komponentning asosiy qiymati — barcha ilovalarda izchil va tanish foydalanuvchi tajribasini yaratish