Published on

SwiftUI-da Funksiyalar va subviewlarni ajratish

Authors

Hammaga xush kelibsiz! Mening ismim Nick, bu β€” Swiftful Thinking kanali.

Bu videoda body ichidan funksiyalar va view qismlarini ajratib chiqarishni o'rganamiz. Bu majburiy emas va ko'pchilik boshlang'ich kurslar buni umuman ko'rib chiqmaydi. Lekin men buni ishlab chiqarish ilovalarida doim qo'llayman va bu juda foydali odat ekanligiga ishonaman.

Nima uchun bu muhim?

Hozircha kursimizda qilgan ekranlarimiz nisbatan qisqa edi va barcha kod body ichida yaxshi ko'rinardi. Lekin murakkab ko'rinishlar yaratila boshlansa, body juda uzun bo'lib ketadi. Bu ikki muammoga olib keladi:

  • O'qish qiyin β€” uzun body-da nima bo'layotganini tushunish qiyinlashadi
  • Xatolarni topish qiyin β€” ko'p qismli kodda muammoni aniqlash ham mushkul

Shuning uchun body-ni doim toza va tartibli saqlashni tavsiya qilaman. Boshqa dasturchi yoki menejer kodingizga qaraydigan bo'lsa, u nima bo'layotganini darhol tushunishi kerak.

Yangi fayl yaratish

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

Boshlang'ich ko'rinish

Oldingi videodagi kabi oddiy ekran quramiz β€” sariq fon, sarlavha va tugma:

struct ExtractedFunctionsBootcamp: View {

    @State var backgroundColor: Color = .pink

    var body: some View {
        ZStack {
            // Fon qatlami
            backgroundColor
                .ignoresSafeArea(.all)

            // Kontent qatlami
            VStack {
                Text("Sarlavha")
                    .font(.largeTitle)

                Button(action: {
                    backgroundColor = .yellow
                }, label: {
                    Text("Bosing")
                        .font(.headline)
                        .foregroundColor(.white)
                        .padding()
                        .background(Color.black)
                        .cornerRadius(10)
                })
            }
        }
    }
}

Dastlab fon pushti, tugma bosilganda sariq bo'ladi. Hozircha hech qanday yangilik yo'q β€” shu erdan funksiyalarni ajratishni o'rganamiz.

1-qism: Funksiyani ajratib chiqarish

Hozir tugma bosilganda backgroundColor = .yellow degan bitta qator ishlaydi. Lekin haqiqiy ilovada tugma bosilganda ma'lumotlar bazasiga murojaat, yuklanish ekrani, ma'lumotlarni yangilash va boshqa ko'p narsa bo'lishi mumkin. Agar bularning hammasini tugma ichiga yozib ketsak, body chalkashib ketadi.

Yechim: bu mantiqni alohida funksiyaga ajratib chiqarish.

struct ExtractedFunctionsBootcamp: View {

    @State var backgroundColor: Color = .pink

    var body: some View {
        ZStack {
            backgroundColor
                .ignoresSafeArea(.all)

            VStack {
                Text("Sarlavha")
                    .font(.largeTitle)

                Button(action: {
                    // Mantiq funksiya ichida β€” body toza qoladi
                    buttonPressed()
                }, label: {
                    Text("Bosing")
                        .font(.headline)
                        .foregroundColor(.white)
                        .padding()
                        .background(Color.black)
                        .cornerRadius(10)
                })
            }
        }
    }

    // Tugma bosilgandagi mantiq shu yerda
    func buttonPressed() {
        backgroundColor = .yellow
    }
}

Endi body ichida tugma faqat buttonPressed() ni chaqiradi. Barcha mantiq esa alohida funksiyada turibdi.

Foydali maslahat: Funksiya nomiga o'ng tugma bosib Jump to Definition ni tanlasangiz, Xcode sizni to'g'ridan-to'g'ri o'sha funksiya aniqlangan joyga olib boradi.

Agar faqat bitta qator mantiq bo'lsa, funksiya ajratish shart emas. Lekin mantiq ko'paygan sari β€” ajratish juda foydali bo'ladi.

2-qism: View qismini ajratib chiqarish

Funksiyalardan tashqari, view qismlarini ham ajratish mumkin. Masalan, ZStack ichidagi kontent qatlamini alohida o'zgaruvchiga olib chiqamiz:

struct ExtractedFunctionsBootcamp: View {

    @State var backgroundColor: Color = .pink

    var body: some View {
        ZStack {
            // Fon qatlami
            backgroundColor
                .ignoresSafeArea(.all)

            // Kontent qatlami β€” alohida o'zgaruvchidan chaqirilmoqda
            contentLayer
        }
    }

    // Kontent qatlami alohida o'zgaruvchi sifatida
    var contentLayer: some View {
        VStack {
            Text("Sarlavha")
                .font(.largeTitle)

            Button(action: {
                buttonPressed()
            }, label: {
                Text("Bosing")
                    .font(.headline)
                    .foregroundColor(.white)
                    .padding()
                    .background(Color.black)
                    .cornerRadius(10)
            })
        }
    }

    // Tugma bosilgandagi mantiq
    func buttonPressed() {
        backgroundColor = .yellow
    }
}

Canvas-da Resume bosib ko'rsangiz, hamma narsa avvalgidek ishlaydi. Lekin endi body juda toza:

  • backgroundColor β€” fon qatlami
  • contentLayer β€” kontent qatlami
  • buttonPressed() β€” tugma mantiq

Boshqa dasturchi bu kodga qarasa, darhol tushunadi. Nimadir o'zgartirmoqchi bo'lsa, qaysi qismga kirishini biladi.

To'liq kod

struct ExtractedFunctionsBootcamp: View {

    @State var backgroundColor: Color = .pink

    var body: some View {
        ZStack {
            backgroundColor
                .ignoresSafeArea(.all)

            contentLayer
        }
    }

    var contentLayer: some View {
        VStack {
            Text("Sarlavha")
                .font(.largeTitle)

            Button(action: {
                buttonPressed()
            }, label: {
                Text("Bosing")
                    .font(.headline)
                    .foregroundColor(.white)
                    .padding()
                    .background(Color.black)
                    .cornerRadius(10)
            })
        }
    }

    func buttonPressed() {
        backgroundColor = .yellow
    }
}

Xulosa

Bu videoda o'rgandik:

  • Funksiya ajratish β€” tugma va boshqa amallar mantiqini body-dan tashqariga olib chiqish
  • View ajratish β€” view qismlarini var contentLayer: some View sifatida alohida o'zgaruvchiga o'rash
  • body toza bo'lsa β€” kod o'qilishi, hamkorlik va xato topish osonlashadi
  • Jump to Definition β€” funksiya yoki o'zgaruvchi qaerda aniqlangan ekanini tezda topish usuli

Keyingi videoda bu bir qadam oldinga olamiz β€” view ichiga butunlay alohida viewlar joylashtirishni o'rganamiz!

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

Buy mea coffee