SwiftUI-da Grid

LazyVGrid va LazyHGrid allaqachon mavjud edi, lekin iOS 16 da yangi komponent — oddiy Grid qo'shildi. U lazy emas (barcha elementlar darhol chiziladi), lekin sozlash imkoniyatlari ancha kengroq: ustun birlashtirish, alohida ustun hizalanishi, qator hizalanishi va boshqalar.

Yangi fayl yaratish

Navigatorda o'ng tugma bosib yangi SwiftUI fayli yarating. Uni GridViewBootcamp deb nomlang va Create tugmasini bosing.

Asosiy tushuncha — GridRow

Grid {
    GridRow {
        Text("1")
        Text("2")
        Text("3")
    }
    GridRow {
        Text("4")
        Text("5")
    }
}

Grid ichida GridRow orqali har bir qator belgilanadi. Turli qatorlarda elementlar soni har xil bo'lishi mumkin, lekin ustunlar baribir bir-biriga moslab tekislanadi — birinchi qatordagi birinchi element ikkinchi qatordagi birinchi element bilan bir ustunda joylashadi.

Yordamchi funksiya

Kodni qisqartirish uchun har bir katak (cell) uchun funksiya yaratamiz:

private func cell(_ value: Int) -> some View {
    Text("\(value)")
        .font(.largeTitle)
        .padding()
        .background(Color.blue)
}

4x4 grid yaratish

struct GridViewBootcamp: View {
    var body: some View {
        Grid {
            ForEach(0..<4) { rowIndex in
                GridRow {
                    ForEach(0..<4) { columnIndex in
                        let cellNumber = rowIndex * 4 + columnIndex + 1
                        cell(cellNumber)
                    }
                }
            }
        }
    }

    private func cell(_ value: Int) -> some View {
        Text("\(value)")
            .font(.largeTitle)
            .padding()
            .background(Color.blue)
    }
}

Natijada 1 dan 16 gacha bo'lgan raqamlar 4x4 jadval shaklida joylashadi.

Hizalanish — alignment

Grid(alignment: .leading) {
    // ...
}

Variantlar: .leading, .center (standart), .trailing va boshqalar.

Bo'shliqlar — horizontalSpacing va verticalSpacing

Grid(horizontalSpacing: 8, verticalSpacing: 50) {
    // ...
}

• horizontalSpacing — ustunlar orasidagi masofa
• verticalSpacing — qatorlar orasidagi masofa

Bo'sh katak yaratish

EmptyView() ishlatish to'g'ri natija bermaydi — chunki EmptyView umuman katak hisoblanmaydi, shuning uchun grid tuzilishi buziladi:

// ❌ Noto'g'ri — qator strukturasini buzadi
if cellNumber == 7 {
    EmptyView()
} else {
    cell(cellNumber)
}

To'g'ri yechim — ko'rinmas, lekin haqiqiy joy egallaydigan element ishlatish:

// ✅ To'g'ri — joy saqlanib qoladi, lekin ko'rinmaydi
if cellNumber == 7 {
    Color.clear
        .gridCellUnsizedSize(.horizontal)
} else {
    cell(cellNumber)
}

gridCellUnsizedSize — maksimal kengaytirishni o'chirish

Color yoki Divider kabi elementlar standart holatda mavjud bo'sh joyni to'liq egallaydi. Bu grid o'lchamini buzib yuborishi mumkin:

Divider()
    .gridCellUnsizedSize(.horizontal)

Bu modifier elementga "grid o'lchamidan tashqariga chiqma" deydi.

gridCellColumns — ustunlarni birlashtirish

Bitta katakni bir nechta ustun kengligiga cho'zish mumkin:

cell(cellNumber)
    .gridCellColumns(cellNumber == 6 ? 2 : 1)

Diqqat: katak ikki ustunni egallaganda, qolgan kataklar soni mos ravishda kamayadi. Agar qatorda ustunlar soni o'zgarmasligi kerak bo'lsa, kengaytirilgan katak o'rnini bo'sh katak bilan muvozanatlash kerak.

gridColumnAlignment — ustun bo'yicha alohida hizalanish

Har bir ustunga alohida hizalanish berish mumkin. Buning uchun shu ustundagi istalgan bitta katakka modifier qo'shish kifoya:

cell(cellNumber)
    .gridColumnAlignment(cellNumber == 1 ? .trailing : .center)

Bu modifier butun ustunning hizalanishini belgilaydi, faqat o'sha bitta katakni emas.

gridCellAnchor — katak ichidagi hizalanish

gridColumnAlignment butun ustunga ta'sir qilsa, gridCellAnchor faqat bitta katak ichidagi kontentning joylashuvini belgilaydi:

cell(cellNumber)
    .gridCellAnchor(.leading)

Bu ayniqsa gridCellColumns bilan kengaytirilgan kataklar uchun foydali — katak kengroq bo'lganda kontent uning ichida qayerda joylashishini belgilaydi.

Qator hizalanishi — GridRow(alignment:)

GridRow(alignment: .top) {
    cell(10)
        .frame(height: 20)
    cell(11)
}

Har bir GridRow o'z hizalanishiga ega bo'lishi mumkin — .top, .center, .bottom.

To'liq kod

struct GridViewBootcamp: View {
    var body: some View {
        Grid(
            alignment: .center,
            horizontalSpacing: 8,
            verticalSpacing: 8
        ) {
            ForEach(0..<4) { rowIndex in
                GridRow {
                    ForEach(0..<4) { columnIndex in
                        let cellNumber = rowIndex * 4 + columnIndex + 1

                        if cellNumber == 7 {
                            Color.clear
                                .gridCellUnsizedSize(.horizontal)
                        } else {
                            cell(cellNumber)
                                .gridCellColumns(cellNumber == 6 ? 2 : 1)
                                .gridColumnAlignment(
                                    cellNumber == 1 ? .trailing :
                                    cellNumber == 4 ? .leading : .center
                                )
                        }
                    }
                }
            }
        }
    }

    private func cell(_ value: Int) -> some View {
        Text("\(value)")
            .font(.largeTitle)
            .padding()
            .background(Color.blue)
    }
}

Modifier-lar xulosa jadvali

Grid va LazyVGrid — qaysi birini tanlash

LazyVGrid hamon o'z o'rniga ega — u uzun, aylanuvchan ro'yxatlar uchun samaraliroq, chunki faqat ekranda ko'rinadigan elementlarni chizadi. Grid esa barcha elementlarni darhol chizadi, lekin sozlash imkoniyatlari ancha boy — murakkab, statik jadval ko'rinishidagi dizaynlar uchun ko'proq mos keladi.

Xulosa

Bu videoda o'rgandik:

• Grid va GridRow — qator va ustunlarni belgilash
• alignment, horizontalSpacing, verticalSpacing — umumiy grid sozlamalari
• gridCellUnsizedSize — elementni grid o'lchamidan tashqariga chiqishini cheklash
• gridCellColumns — bir nechta ustunni birlashtirish
• gridColumnAlignment — ustun bo'yicha alohida hizalanish
• gridCellAnchor — katak ichidagi kontent joylashuvi
• EmptyView() o'rniga bo'sh joy uchun Color.clear + gridCellUnsizedSize ishlatish kerak