SwiftUI-da subviewlarni ajratish

Hammaga xush kelibsiz! Mening ismim Nick, bu — Swiftful Thinking kanali.

Bu videoda subviewlarni ajratishni o'rganamiz. Bu oldingi videodagi funksiya va view ajratishga o'xshaydi, lekin farqi bor — bu safar ajratilgan kod butunlay o'z viewiga ega bo'ladi. Shunda u o'z initializer-iga ega bo'ladi va har safar chaqirilganda har xil qiymatlar bilan ishlatish mumkin bo'ladi.

Qachon subview ajratish kerak?

Oldingi videoda var contentLayer: some View yordamida view qismini ajratdik. Bu usul juda yaxshi, lekin faqat statik kontent uchun — ya'ni har safar bir xil ko'rinadigan, o'zgarmaydigan qismlar uchun.

Agar bir xil view bir necha marta, lekin har safar boshqa ma'lumotlar bilan ishlatilsa — masalan, biri "olma", biri "apelsin", biri "banan" — u holda subview ajratish kerak. Shunda har bir chaqiruvda boshqa qiymat berib chaqirish mumkin bo'ladi.

Yangi fayl yaratish

Navigatorda o'ng tugma bosib yangi SwiftUI fayli yarating. Uni ExtractSubviewsBootcamp deb nomlang va Create tugmasini bosing. Canvas-da Resume bosing.

Boshlang'ich ko'rinish

struct ExtractSubviewsBootcamp: View {
    var body: some View {
        ZStack {
            // Fon qatlami
            Color.blue
                .ignoresSafeArea(.all)

            // Kontent qatlami
            VStack {
                Text("1")
                Text("Olma")
            }
            .padding()
            .background(Color.red)
            .cornerRadius(10)
        }
    }
}

1-usul: var bilan ajratish (statik kontent uchun)

Oldingi videoda o'rgangandek — agar kontent o'zgarmaydigan bo'lsa:

struct ExtractSubviewsBootcamp: View {
    var body: some View {
        ZStack {
            Color.blue
                .ignoresSafeArea(.all)

            myItem
        }
    }

    var myItem: some View {
        VStack {
            Text("1")
            Text("Olma")
        }
        .padding()
        .background(Color.red)
        .cornerRadius(10)
    }
}

Bu usul yaxshi, lekin myItem doim bitta ko'rinishda bo'ladi — "1" va "Olma". Agar "10 ta apelsin" yoki "34 ta banan" ham kerak bo'lsa, bu usul yetarli emas.

2-usul: Subview ajratish (dinamik kontent uchun)

Xcode yorlig'i bilan

VStack-ni Command tugmasi bilan bosing → Extract Subview ni tanlang → nomini MyItem deb o'zgartiring va Enter bosing.

Xcode avtomatik ravishda quyidagini yaratadi:

struct MyItem: View {
    var body: some View {
        VStack {
            Text("1")
            Text("Olma")
        }
        .padding()
        .background(Color.red)
        .cornerRadius(10)
    }
}

Qo'lda yozish

Xcode yorlig'i ishlamasa, qo'lda ham yozish mumkin. Natija bir xil:

struct MyItem: View {
    var body: some View {
        VStack {
            Text("1")
            Text("Olma")
        }
        .padding()
        .background(Color.red)
        .cornerRadius(10)
    }
}

Subview nomi katta harf bilan boshlanadi — MyItem, ContentLayer kabi. O'zgaruvchi nomlaridan farqi shu.

Subviewga o'zgaruvchilar qo'shish

Endi MyItem-ni dinamik qilamiz — har safar chaqirilganda boshqa sarlavha, son va rang berish uchun:

struct MyItem: View {
    let title: String
    let count: Int
    let color: Color

    var body: some View {
        VStack {
            Text("\(count)")
            Text(title)
        }
        .padding()
        .background(color)
        .cornerRadius(10)
    }
}

Endi MyItem chaqirilganda unga title, count va color berilishi shart.

Subviewni qayta ishlatish

Bir xil MyItem-ni turli qiymatlar bilan bir necha marta ishlatamiz:

struct ExtractSubviewsBootcamp: View {
    var body: some View {
        ZStack {
            Color.blue
                .ignoresSafeArea(.all)

            contentLayer
        }
    }

    var contentLayer: some View {
        HStack(spacing: 12) {
            MyItem(title: "Olma", count: 1, color: .red)
            MyItem(title: "Apelsin", count: 10, color: .orange)
            MyItem(title: "Banan", count: 34, color: .yellow)
        }
    }
}

struct MyItem: View {
    let title: String
    let count: Int
    let color: Color

    var body: some View {
        VStack {
            Text("\(count)")
            Text(title)
        }
        .padding()
        .background(color)
        .cornerRadius(10)
    }
}

Canvas-da Resume bosib ko'rsangiz — qizil olmalar, to'q sariq apelsinlar va sariq bananlar ko'rinadi. Bir xil MyItem uch marta ishlatildi, har safar boshqa ma'lumotlar bilan.

Ikki usulni birgalikda ishlatish

Eng yaxshi amaliyot — ikkala usulni birga qo'llash:

• var contentLayer — o'zgarmaydigan tuzilma uchun
• struct MyItem — dinamik, qayta ishlatiladigan qism uchun

struct ExtractSubviewsBootcamp: View {
    var body: some View {
        ZStack {
            // Fon qatlami — o'zgarmaydi
            Color.blue
                .ignoresSafeArea(.all)

            // Kontent qatlami — o'zgarmaydi, ichidagi ma'lumotlar o'zgaradi
            contentLayer
        }
    }

    var contentLayer: some View {
        HStack(spacing: 12) {
            MyItem(title: "Olma", count: 1, color: .red)
            MyItem(title: "Apelsin", count: 10, color: .orange)
            MyItem(title: "Banan", count: 34, color: .yellow)
        }
    }
}

struct MyItem: View {
    let title: String
    let count: Int
    let color: Color

    var body: some View {
        VStack {
            Text("\(count)")
            Text(title)
        }
        .padding()
        .background(color)
        .cornerRadius(10)
    }
}

Foydali maslahat: MyItem-ga o'ng tugma bosib Jump to Definition ni tanlasangiz, Xcode sizni to'g'ridan-to'g'ri MyItem strukturasi aniqlangan joyga olib boradi.

Qaysi usulni tanlash kerak?

Xulosa

Bu videoda o'rgandik:

• Subview — o'z struct-iga ajratilgan alohida view
• Extract Subview — Xcode-ning avtomatik ajratish yorlig'i (Command + klik)
• Initializer — subviewga qiymat uzatish usuli (title, count, color)
• Qayta ishlatish — bir xil subviewni turli qiymatlar bilan bir necha marta chaqirish
• Ikki usulni birlashtirish — var (statik) va struct (dinamik) birgalikda ishlatish

Katta loyihalarda body-ni toza saqlash — professional dasturchi belgisi. Subviewlarni ajratishni odatga aylantiring!

Rahmat tomosha qilganingiz uchun! Men — Nick, bu Swiftful Thinking. Keyingi videoda ko'rishamiz!