SwiftUI-da ForEach siklidan qanday foydalanish kerak

Hammaga salom, va xush kelibsiz! Men — Nik, va biz SwiftUI bootcamp kursining taxminan uchdan bir qismini tugatdik. Umid qilamanki, kursning bu qismi sizlarga zerikarli tuyulmayapti — bilaman, kod yozishni o'rganish juda stressli bo'lishi mumkin, va YouTube darsliklarini tomosha qilish bu jarayonni yanada zerikarli qilib yuborishi mumkin. Shuning uchun men bularni sizlar uchun yengil, qiziqarli va oson qilib berishga harakat qilaman. Ammo, albatta, sizlar nima his qilayotganingizni izohlarda menga aytib turing — agar men biror narsani chalkash qilib tushuntirgan bo'lsam, yoki yaxshilashim mumkin bo'lgan biror narsa bo'lsa, fikr-mulohazalaringizni eshitishni juda xohlardim.

Shuni aytib, videoga o'tamiz — bugun biz ForEach bayonotlari haqida gaplashamiz. ForEach bayonotlari, asosan, SwiftUI-dagi sikllar (loops), xolos. Biz ulardan ekranda biror UI elementini takrorlashni xohlaganimizda foydalanamiz. Masalan, aytaylik, ekranga 10 ta doira (circle) joylashtirishni xohlaymiz — buni "circle"ni 10 marta qo'lda yozib ham qilish mumkin, va bu ishlaydi, ammo buni qilishning yaxshiroq usuli — bitta ForEach bayonoti qo'shib, unga shu doirani 10 marta takrorlashni aytishdir. Shunday qilib, biz bir xil natijaga erishamiz, ammo kodimiz ancha samaraliroq bo'ladi.

Demak, ForEach bayonotlari nafaqat ishlatish uchun oson, balki juda kuchli vositadir — chunki murakkab ilovalarimiz bo'lganda va katta ma'lumotlar to'plamlariga ega bo'lganimizda — masalan, ma'lumotlar to'plamimizda yuzlab turli element bo'lsa — siz hech qachon bir xil narsani 100 marta qo'lda yozishni xohlamaysiz, buning o'rniga buni bir marta yozib, shu ma'lumot ustida sikl yuritadigan ForEach bayonoti yaratishni xohlaysiz. Demak, bu juda foydali va qulay vosita — keling, shuni ko'rib chiqaylik.

Yangi loyiha fayli yaratish

Bu — yengil va oson video bo'ladi. Yana Xcode loyihamizga qaytamiz, va shu video uchun yangi fayl yaratamiz. Navigator'da o'ng tugmani bosib, yangi fayl yaratamiz — bu SwiftUI View bo'ladi. Biz SwiftUI-da ForEach deb ataladigan sikl bayonotlari haqida gaplashayotganimiz uchun, buni ForEachBootcamp deb ataymiz. "Create" tugmasini bosamiz, ichkariga kirgach esa, canvas'da "Resume" tugmasini bosib kod yozishni boshlaymiz.

Oldingi bir nechta videoda biz HStack va VStacklar haqida, shuningdek ma'lumot o'zgaruvchilarini bodydan tashqarida saqlash haqida o'rgangan edik — va bu videoda ikkalasidan ham foydalanamiz.

Statik ravishda matn qo'shish muammosi

Avval VStack yaratamiz, ichiga esa bir nechta matn qo'shamiz: birinchisi — "1", ikkinchisi — "2", uchinchisi — "3". SwiftUI-da, agar VStackimizga bir qancha element qo'shmoqchi bo'lsak, buni xuddi shunday — bir, ikki, uch va hokazo — qo'lda yozib chiqishimiz mumkin.

Ammo, masalan, Instagram lentasiga o'xshash vaziyatni tasavvur qiling — bunda juda ko'p ma'lumot bor, ehtimol yuzlab element bor, va bizga yuzlab turli matn kerak bo'lishi mumkin. Dasturchilar sifatida, biz kodni qayta-qayta yozishni yomon ko'ramiz — buni 100 marta yozish juda-juda zeriktiradi.

Shuning uchun SwiftUI-da buning o'rniga ForEach siklidan foydalanishimiz mumkin — bu bizga ma'lum bir mantiqni ma'lum miqdorda takrorlash, so'ngra natijalarni ilovamizga joylashtirish imkonini beradi. Keling, shu uchta matnni o'chirib tashlaylik.

Range bilan birinchi ForEach

ForEach deb yozib, qavslarni ochamiz. Avval ma'lumot sifatida range va butun son (integer)dan foydalanamiz — bu shuni bildiradi: range, asosan, biz necha marta sikl yuritmoqchi ekanligimizni so'raydi. Shu yerda Enter bosamiz, va range uchun 0..<10 deb yozamiz — bu 0dan boshlab, 10dan kichik bo'lgan qiymatgacha, ya'ni 9gacha boradi. Demak, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 — bu jami 10 marta sikl, deganidir.

Endi tarkib (content) uchun Enter bosamiz. Bu yerda berilgan standart parametr nomi menga unchalik yoqmaydi, shuning uchun men buni o'chirib, shunchaki index deb yozaman. Demak, kodimiz quyidagicha ko'rinishi kerak:

ForEach(0..<10) { index in
    Text("hi")
}

Endi biz 10 marta sikl yuritamiz, va har bir siklda Text("hi") ishga tushadi — shuning uchun bizda 10 ta "hi" matni paydo bo'ladi, va ular VStack ichida bo'lgani uchun, vertikal (tik) tartibda joylashadi. Har bir siklning o'z indeksi bor, va indeks — bu shunchaki shu sikl nechinchi marta ishga tushganini bildiradi. Yana eslatib o'tay: biz 0dan boshlaymiz va 10dan kichik qiymatgacha boramiz, ya'ni 9gacha.

Har bir sikldagi indeksdan foydalanish

Endi shu "hi" matniga ikki nuqta qo'yib, ichiga shu index o'zgaruvchisini qo'shmoqchiman. Oldingi videoda o'rganganimizdek, buni teskari chiziqcha (\) qo'yib, qavs ochib-yopib, ichiga shu o'zgaruvchiga murojaat qilish orqali amalga oshirish mumkin — bu yerda index:

ForEach(0..<10) { index in
    Text("hi: \(index)")
}

Endi preview'da barcha sikllarni ko'rishimiz mumkin: birinchi siklning indeksi — 0, chunki biz 0dan 10dan kichik qiymatgacha, ya'ni 9gacha boramiz: 0, 1, 2, 3, 4, 5, 6, 7, 8, va eng so'nggisi — 9. Ammo, albatta, bu jami 10 marta sikl, deganidir.

Bu kodimizda juda foydali, chunki katta ma'lumotlar to'plamlari bilan ishlay boshlaganimizda, biz narsalar ustida sikl yuritishni xohlaymiz — kodni yuzlab marta qaytadan yozishni xohlamaymiz.

ForEach ichiga istalgan view'ni joylashtirish

Shu ForEach bo'limiga biz xohlagan har qanday view'ni qo'shishimiz mumkin. Masalan, doira (Circle) qo'shib, unga, aytaylik, 30x30 o'lchamida frame beraylik — tekislash (alignment) shart emas. Endi preview'da pastga tushib boruvchi 10 ta doiramizni ko'rishimiz mumkin.

Keling, shu doirani HStack ichiga joylaymiz — buning uchun doirani belgilab, "Embed in HStack" buyrug'idan foydalanamiz (albatta, HStack va qavslarni qo'lda ham yozishingiz mumkin edi). Endi doiraning o'ng tomoniga matn qo'shamiz, va unga "index: " deb yozib, yana teskari chiziqcha va qavslar yordamida shu indexga murojaat qilamiz:

ForEach(0..<10) { index in
    HStack {
        Circle()
            .frame(width: 30, height: 30)

        Text("index: \(index)")
    }
}

Demak, ko'rib turganingizdek, biz shu ForEach ichiga xohlagan har qanday narsani joylashtirishimiz mumkin — bu yerda bizda doira va matndan iborat HStack bor, va u sikl yuritmoqda. Bu juda foydali: bu yerga o'z maxsus view'larimizni, maxsus qatorlarimizni (rows), maxsus tugmalarimizni ham joylashtirishimiz mumkin, va har doim turli ma'lumotlar bilan sikl yuritishimiz mumkin.

Haqiqiy ma'lumotlar bilan ishlash: massiv yaratish

Endi buni bir qadam oldinga olib borib, sizlarga haqiqiy ma'lumotlar bilan qanday ishlatishni ko'rsatmoqchiman. bodydan tashqarida ma'lumotlar to'plami (data set) yarataylik: data nomli konstanta yarataman, uning turi — string'lar massivi (array of strings) bo'ladi. Massiv ekanligini bildirish uchun kvadrat qavslardan foydalanaman, ichiga String deb yozaman, so'ngra qavslarni yopaman, va buni bo'sh massivga tenglashtiraman — buning uchun shunchaki ochiq-yopiq kvadrat qavs qo'yaman:

let data: [String] = []

Bilamizki, string — bu shunchaki matn. Masalan, agar let myString: String = "hello" deb yozsak, myString shunchaki "hello" bo'ladi. String'lar massivi esa — bir nechta string'ning bitta to'plam ichida birgalikda turishi, xolos.

Agar men shu ForEachni o'chirib, o'rniga shunchaki Text(myString) qo'ysam va canvas'da "Resume" tugmasini bossam, ekranda shunchaki "hello" chiqadi — chunki bu bitta string, xolos. Ammo agar bizda ko'plab string'lardan iborat ma'lumot to'plami bo'lsa, biz ular ustida sikl yuritishimiz mumkin.

Massiv ustida ForEach bilan sikl yuritish

Keling, shu data ustida sikl yurituvchi ForEach yarataylik. Avvalgi matnni o'chirib, ForEach deb yozamiz. Bu safar esa, data va content parametrlariga ega bo'lgan birinchi (standart) variantdan foydalanamiz. Demak, bizda quyidagi variantlar bor: shunchaki rangedan foydalanadigani (buni allaqachon ishlatdik), standart data varianti (hozir ishlatadiganimiz), va maxsus id bilan ishlaydigan, ancha murakkabroq variant (bu haqida keyinroq, biroz oldinroq darajada gaplashamiz — bu haqiqiy ilovalarda ko'p ishlatiladi). Hozircha esa biz shu birinchi — data va content variantidan foydalanamiz.

Enter bosamiz: bizning ma'lumotimiz, albatta, shu data bo'ladi, ammo biz massivning indekslari ustida sikl yuritishimiz kerak, shuning uchun data.indices deb yozamiz. Tarkib (content) uchun Enter bosganimizda, yana standart parametr nomi menga yoqmaydi, shuning uchun buni index deb o'zgartiramiz. Endi bu barcha elementlar ustida sikl yuritadi, va har bir element uchun "New item: " matnini, so'ngra esa indeksni chiqaramiz:

ForEach(data.indices) { index in
    Text("New item: \(index)")
}

Kodimiz muvaffaqiyatli yig'ilmoqda, ammo ekranda hech narsa ko'rinmaydi — buning sababi, bizning ma'lumotlar to'plamimiz hozircha bo'sh. Keling, unga bir nechta string qo'shaylik:

let data: [String] = [
    "hi this is a first string",
    "hello",
    "hey everyone"
]

Endi canvas'da "Resume" tugmasini bossak, ForEach shu ma'lumotlar to'plamidagi barcha indekslar ustida sikl yuritadi. Indeks, asosan, ma'lumotdagi tartib raqami, xolos — shuning uchun birinchi indeks — 0. Preview'da ko'ramiz: New item: 0, New item: 1, va New item: 2 — jami uch marta sikl, chunki ma'lumotlar to'plamida uchta element bor.

Haqiqiy ma'lumotlarni ekranga chiqarish

Albatta, biz bu yerda haqiqiy ma'lumotdan foydalanishni xohlaymiz, bu "New item" yozuvi bizga kerak emas. Shuning uchun "New item" o'rniga, shu data massiviga murojaat qilamiz. "New item"ni o'chirib, teskari chiziqcha va qavslar yordamida data massiviga murojaat qilaman. Massivda muayyan bir nuqtaga murojaat qilmoqchi bo'lsak, shunchaki shu massivga kvadrat qavs qo'shishimiz kerak — ichiga esa qaysi indeksni xohlashimizni yozamiz. Agar birinchi indeks, ya'ni 0ni qo'ysak, birinchi indeksimiz bo'lgan "hi this is a first string" qiymatini ko'ramiz — albatta, bu uch marta chiqadi, chunki uni har bir siklda chiqaramiz.

Ammo biz har bir siklda o'ziga mos indeksni olamiz, shuning uchun shu indeksni massivga qo'yishimiz mumkin — endi biz haqiqatan ham ma'lumotimiz ustida sikl yuritamiz, va ma'lumotimiz dinamik:

ForEach(data.indices) { index in
    Text(data[index])
}

Endi har bir matnning sarlavhasi boshqacha — "hi this is a first string", "hello", "hey everyone" — va har birining indeksi ham boshqacha. Haqiqiy ilovada, ehtimol, indeks raqamini to'g'ridan-to'g'ri ekranga chiqarmaysiz — men buni shunchaki sizlarga ko'rsatish uchun shunday qilyapman. Ammo bu juda kuchli vosita: murakkabroq ilovalar yarata boshlaganingizda, siz nafaqat string'lar massividan, balki ranglar massividan yoki yanada murakkabroq ma'lumotlardan ham foydalanishingiz mumkin. Bu — katta ma'lumotlar to'plamini ekranga juda tez va samarali joylashtirishning asosiy usuli.

Katta ma'lumotlar to'plami va keyingi qadam

Ushbu video uchun, asosan, shu, xolos. Agar mavzuni kuzatib borayotgan bo'lsangiz, o'z view'laringizni yaratib, VStack va HStacklardan foydalanib, oddiy sinov ma'lumotlari yoki indekslar ustida sikl yuritib ko'rishni qattiq tavsiya qilaman — shunda ForEach sikllari qanday ishlashini yaxshi his qilib olasiz, chunki biz bularni keyingi bir qancha videoda, shuningdek o'z ilovalaringizni yaratayotganingizda ham tez-tez ishlatamiz.

Ilovani sinab ko'rar ekansiz, agar ForEachda juda katta indeks oralig'i bo'lsa — masalan, 0dan 100dan kichik qiymatgacha — va tarkibda, aytaylik, balandligi 50 bo'lgan doira bo'lsa, bularning ekrandan tashqariga chiqib ketishini payqashingiz mumkin. Ammo xavotir olmang — keyingi videoda biz ScrollView haqida o'rganamiz, va ScrollView bizga ma'lumot ustida haqiqatan ham aylantirib (scroll) ko'rish imkonini beradi. Shunday qilib, ForEach va katta ma'lumotlar to'plamlari bilan ishlaganimizda, hozir ko'rganingizdek qirqilib qolish o'rniga, biz yuqori-pastga aylantirib ko'rishimiz mumkin bo'ladi.

Umid qilamanki, ushbu video sizlarga yoqdi. Har doimgidek, men — Nik, bu Swiftful Thinking. Agar kontentdan zavqlanayotgan bo'lsangiz, agar videolardan biror narsa o'rganayotgan bo'lsangiz, obuna bo'lish tugmasini bosishni unutmang, va agar bu video foydali bo'lgan deb hisoblasangiz, layk tugmasini ham bosib qo'ying. Yana bir bor rahmat, keyingi videoda ko'rishamiz!