SwiftUI-da Todo itemlari uchun maxsus data model yaratish

Model nima

MVVMdagi birinchi M — bu Model, va ushbu videoda aynan shuni qilamiz: To-do ilovamiz uchun maxsus ma'lumot turi (custom data type) yaratamiz.

To-do list itemlari uchun model kerak, chunki har bir item faqat sarlavhadan (title) iborat emas — uning shuningdek noyob IDsi va is_completed boolean qiymati ham bo'lishi kerak. Shu orqali biz har bir itemning tugallanganmi yoki yo'qligini aniqlaymiz.

Albatta, production-ready ilovalarda model bu yerda ko'rsatilganidan ancha murakkab bo'ladi, ammo ushbu misol modellarni qanday yaratishni va ularni ilovaga qanday samarali joriy etishni o'rganish uchun juda mos.

Muammo: string massivi yetarli emas

Hozirgi ListViewda biz items o'zgaruvchisini string massivi sifatida ishlatmoqdamiz:

@State var items: [String] = [
    "This is the first item",
    "This is the second item",
    "This is the third item"
]

Bu title uchun yaxshi ishlaydi, ammo biz har bir item tugallanganmi yoki yo'qligini ham saqlashni xohlaymiz. Hozirgi string massivi bilan buni qilishning hech qanday yo'li yo'q — bir string-ga qo'shimcha ma'lumot qo'shib bo'lmaydi.

Shuning uchun maxsus model yaratamiz: title va is_completed holatini birgalikda saqlaydigan o'zimizning ma'lumot turi.

Models papkasi va yangi fayl

Navigator-da o'ng tugmani bosib, yangi Group yaratamiz va unga Models deb nom beramiz. Esda tuting: biz MVVM arxitekturasini qo'llayapmiz — M model, V view, va keyingi videoda VM (ViewModel) qo'shamiz.

Models papkasida o'ng tugmani bosib, yangi fayl yaratamiz — bu safar SwiftUI View emas, shunchaki oddiy Swift File tanlaymiz. Faylga ItemModel deb nom beramiz.

ItemModel struct

struct ItemModel: Identifiable {
    let id: String = UUID().uuidString
    let title: String
    let isCompleted: Bool
}

Bu yerda:

• id — har bir item uchun noyob identifikator. UUID() — tasodifiy ID yaratuvchi o'rnatilgan funksiya. Biz uni uuidStringga o'girамiz, chunki string turlar uchinchi tomon ma'lumotlar bazasiga joylashtirishda ancha moslashuvchan.
• title — itemning sarlavhasi (string).
• isCompleted — item tugallanganmi yoki yo'qligini bildiruvchi boolean.

Nima uchun Identifiable

ForEachda foydalanish uchun, ItemModelni Identifiable protokoliga mos keltiramiz. Bu uchun model ichida id mavjud bo'lishi kerak — va biz buni allaqachon qo'shdik.

ListView-ni yangilash

Endi ListViewdagi items massivini string o'rniga ItemModel massiviga o'zgartiramiz:

@State var items: [ItemModel] = [
    ItemModel(title: "This is the first title!", isCompleted: false),
    ItemModel(title: "This is the second title!", isCompleted: true),
    ItemModel(title: "This is the third title!", isCompleted: false)
]

ForEach endi id: \.self talab qilmaydi — Identifiablega mos kelgani uchun, shunchaki itemsni uzatish kifoya:

ForEach(items) { item in
    ListRowView(item: item)
}

ListRowView-ni yangilash

ListRowViewda ham o'zgarish qilishimiz kerak. Oldin bu view faqat title (string) qabul qilardi. Endi unga butun ItemModel uzatamiz:

struct ListRowView: View {
    let item: ItemModel

    var body: some View {
        HStack {
            Image(systemName: item.isCompleted ? "checkmark.circle" : "circle")
                .foregroundColor(item.isCompleted ? .green : .red)

            Text(item.title)

            Spacer()
        }
        .font(.title2)
        .padding(.vertical, 8)
    }
}

Bu yerda:

• Agar isCompleted rost bo'lsa — checkmark.circle ikonkasi va yashil rang.
• Agar isCompleted yolg'on bo'lsa — circle ikonkasi va qizil rang.

Preview-ni yangilash

ListRowViewning preview-ini ham yangilaymiz. Preview ichidagi o'zgaruvchilar static bo'lishi kerak (bu faqat preview uchun kerak bo'lgan maxsus holat):

#Preview {
    let item1 = ItemModel(title: "First item", isCompleted: false)
    let item2 = ItemModel(title: "Second item", isCompleted: true)

    return Group {
        ListRowView(item: item1)
        ListRowView(item: item2)
    }
    .previewLayout(.sizeThatFits)
}

.previewLayout(.sizeThatFits) — preview-ni butun iPhone ekranida emas, shunchaki ListRowViewning haqiqiy o'lchamida ko'rsatadi. Shu orqali birinchi item (tugallanmagan — qizil doira) va ikkinchi item (tugallangan — yashil belgi) ni aniq ko'rishimiz mumkin.

Natija

Endi ListViewning preview-ida barcha uchta itemimizni ko'rishimiz mumkin:

• Tugallanmagan itemlar — qizil doira
• Tugallangan itemlar — yashil belgi

Bu endi haqiqiy ilovaga o'xshab qoldi. Endi modelimiz tayyor va view-ga muvaffaqiyatli joriy etildi. Keyingi videoda ViewModel qo'shamiz — bu yerda itemlarni qo'shish, o'chirish va yangilash mantig'ini yozamiz.