Published on: Sunday, April 5, 2026

AsyncImage bilan masofaviy rasmlar

Authors

Name
ShoxruxC
@iOSdasturchi

Ma'lumot ko'rsatadigan ko'pchilik ilovalar rasmlarni ham ko'rsatadi — profil suratlari, mahsulot rasmlari, maqola sarlavhalari. URL dan rasmlarni yuklash oldin uchinchi tomon kutubxonalarini talab qilardi, lekin SwiftUI endi AsyncImage ni o'rnatilgan holda taqdim etadi. U tarmoq so'rovini, yuklash holatini va xato holatini bir toza ko'rinishda boshqaradi.

AsyncImage ning eng oddiy versiyasi faqat URL oladi va rasmni avtomatik yuklaydi. Ammo haqiqiy kuch phase-asosli API da — bu yuklash paytida va yuklanmasa nima ko'rsatishni aniq boshqarish imkonini beradi.

import SwiftUI

struct ProfilKartasi: View {
    let imageURL: URL

    var body: some View {
        VStack(spacing: 12) {
            // Phase-asosli API — yuklash, muvaffaqiyat va xato to'liq nazorat ostida
            AsyncImage(url: imageURL) { phase in
                switch phase {
                case .empty:
                    // Rasm yuklanayotganda ko'rsatiladi
                    ProgressView()
                        .frame(width: 80, height: 80)

                case .success(let image):
                    // Yuklangan rasm — modifikatorlar bu yerda qo'shiladi
                    image
                        .resizable()
                        .scaledToFill()
                        .frame(width: 80, height: 80)
                        .clipShape(.circle)

                case .failure:
                    // Rasm yuklanmasa ko'rsatiladi
                    Image(systemName: "person.circle.fill")
                        .resizable()
                        .frame(width: 80, height: 80)
                        .foregroundStyle(.secondary)

                @unknown default:
                    // Kelajak iOS versiyalari yangi phase qo'shsa
                    EmptyView()
                }
            }

            Text("Profil rasmi")
                .font(.caption)
                .foregroundStyle(.secondary)
        }
    }
}

struct AsyncImageMisol: View {
    let url = URL(string: "https://picsum.photos/200")!

    var body: some View {
        VStack(spacing: 24) {
            Text("AsyncImage misoli")
                .font(.title2)
                .bold()

            ProfilKartasi(imageURL: url)

            // Oddiy (phase yoq) — tezkor prototip uchun
            AsyncImage(url: url) { image in
                image.resizable().scaledToFit()
            } placeholder: {
                Color.gray.opacity(0.3)
            }
            .frame(height: 150)
            .clipShape(RoundedRectangle(cornerRadius: 12))
        }
        .padding()
    }
}

Qator	Vazifasi
`AsyncImage(url: imageURL) { phase in }`	Phase-asosli yaratuvchi. `phase` — rasm yuklanayotganda o'zgaradigan `AsyncImagePhase` enum qiymati.
`case .empty`	Rasm hali yuklanmagan. So'rov davom etayotgan vaqtda darhol ko'rsatiladi. `ProgressView` yoki kulrang placeholder ishlaydi.
`case .success(let image)`	Rasm muvaffaqiyatli yuklandi. `image` — SwiftUI `Image` View. Bu yerda `.resizable()`, `.scaledToFill()` va boshqa modifikatorlar qo'shiladi.
`case .failure`	Rasm yuklanmadi — noto'g'ri URL, tarmoq xatosi yoki server xatosi. UI buzilgan ko'rinmasin uchun zapas rasm yoki ikonka ko'rsating.
`@unknown default`	Kelajak Apple iOS versiyalari yangi phase qo'shsa switchni sinmaslikdan saqlaydi. Har doim `EmptyView()` bilan qo'shing.

AsyncImage patternlari

// Oddiy (phase yo'q) — tezkor va oson, produksiya uchun emas
AsyncImage(url: URL(string: "https://example.com/photo.jpg"))
    .frame(width: 100, height: 100)

// Placeholder closure bilan — o'rta yo'l
AsyncImage(url: url) { image in
    image.resizable().scaledToFit()
} placeholder: {
    Color.gray.opacity(0.3)
}
.frame(height: 200)

// List da foydalanish — kesh yo'qligi haqida esda tuting
List(mahsulotlar) { mahsulot in
    HStack {
        AsyncImage(url: mahsulot.imageURL) { phase in
            switch phase {
            case .success(let image):
                image.resizable().scaledToFill()
                    .frame(width: 50, height: 50)
                    .clipShape(RoundedRectangle(cornerRadius: 8))
            default:
                RoundedRectangle(cornerRadius: 8)
                    .fill(Color.gray.opacity(0.2))
                    .frame(width: 50, height: 50)
            }
        }
        Text(mahsulot.nomi)
    }
}

Placeholder uchun frame shart

Yuklash va xato holatlari uchun aniq .frame() qo'shing. Ularsiz placeholder nol o'lchamga tushib qoladi va rasm yuklananda tartib sakraydi. Frameни oxirgi rasm egallamoqchi bo'lgan o'lchamga moslashtiring.

Kesh haqida eslatma

AsyncImage standart bo'yicha rasmlarni keshlantirmaydi. Bir xil URL List da bir necha marta paydo bo'lib foydalanuvchi aylantirsa, hujayra qayta ko'rinishida rasm qayta yuklanadi. Oddiy holatlar uchun bu yaxshi. Uzun rasm-ko'p ro'yxatlar uchun keyingi darsda keshlash yechimini ko'rasiz.

Tezkor ma'lumotnoma

Sintaksis	Vazifasi
`AsyncImage(url: url) { phase in }`	Phase-asosli API — yuklash, muvaffaqiyat, xato to'liq nazorat
`case .empty`	Rasm yuklanayotganda — `ProgressView` yoki placeholder
`case .success(let image)`	Yuklangan rasm — modifikatorlar shu yerda
`case .failure`	Yuklanmadi — zapas rasm ko'rsating
`@unknown default: EmptyView()`	Kelajak iOS versiyalar uchun
`image.resizable().scaledToFill()`	Rasmni o'lchamlash va proporsiyasini saqlab to'ldirish
`.clipShape(.circle)`	Doira shaklida kesib olish

🎯 Topshiriq: foydalanuvchi kartasi

UserCard yarating: URL dan avatar yuklaydigan yumaloq rasm (yuklash paytida ProgressView, xatoda tizim ikonkasi), ismi va email manzili. https://jsonplaceholder.typicode.com/users dan foydalanuvchilar oling va har birini bu kartada ko'rsating.