Published on: Sunday, February 1, 2026

Grid va LazyVGrid

Authors

Name
ShoxruxC
@iOSdasturchi

VStack va HStack bir o'lchamli layoutlar uchun ajoyib. Lekin bir vaqtning o'zida qatorlar va ustunlar kerak bo'lganda — foto galereya, mahsulotlar katalogi, ikonka ishga tushirgich — grid kerak bo'ladi. SwiftUI-ning ikkita varianti bor: kichik, qat'iy layoutlar uchun satr va ustunlar bo'yicha aniq hizalamani ta'minlovchi Grid va katta, aylanuvchi dinamik kontent uchun LazyVGrid.

Ikkalasining kaliti GridItem — bitta ustunni belgilovchi (LazyVGrid uchun) yoki o'lchamlash tavsifini ifodalovchi qiymat turi. GridItem-lar massivini yaratasiz va bu massiv gridingizning nechta ustuni borligini va ular qanday o'lchamlanishini aniqlaydi.

Uchta ustun turi mavjud: fixed (har doim aniq N nuqta keng), flexible (mavjud joyni ulashadi) va adaptive (minimal o'lchamga ko'ra imkoni boricha ko'p ustun joylashtiradi). Adaptive eng kuchli variant — u mavjud kenglikka qarab ustunlar sonini avtomatik moslaydi.

Swift•

ContentView.swift

import SwiftUI

struct ContentView: View {
// Uchta flexible ustun — har biri kenglikning uchdan bir qismini oladi
let columns = [
GridItem(.flexible()),
GridItem(.flexible()),
GridItem(.flexible())
]

  var body: some View {
      ScrollView {
          // LazyVGrid elementlarni belgilangan ustunlarga joylashtiradi
          LazyVGrid(columns: columns, spacing: 12) {
              ForEach(1...30, id: \.self) { item in
                  // Har bir grid elementi uchun kvadrat katak
                  RoundedRectangle(cornerRadius: 10)
                      .fill(.blue.opacity(0.2))
                      .aspectRatio(1, contentMode: .fit)
                      .overlay {
                          Text("\(item)")
                              .font(.headline)
                      }
              }
          }
          .padding()
      }
  }

}

GridItem turlari

GridItem(.fixed) — qat'iy kenglikdagi ustunlar

// Ikkita qat'iy ustun: tor yon panel va keng asosiy maydon
let columns = [
    GridItem(.fixed(80)),
    GridItem(.fixed(240))
]

Qat'iy ustunlar ekran o'lchamidan qat'iy nazar har doim siz ko'rsatgan kenglikda bo'ladi. Shakl ichidagi yorliq ustuni va qiymat ustuni kabi aniq hizalama kerak bo'lganda foydali.

GridItem(.adaptive) — imkoni boricha ko'p ustun

// Bitta adaptive ustun — SwiftUI nechta sig'ishini aniqlaydi
let columns = [
    GridItem(.adaptive(minimum: 100))
]

// 390 pt kenglikdagi ekranda 3-4 ta ustun yaratadi
// Kengroq iPad da avtomatik ko'proq ustun yaratadi

Adaptive ustunlar eng kuchli variant. SwiftUI-ga minimal ustun kengligi berasiz va u mavjud joyda imkoni boricha ko'p ustun joylashtiradi. Bu gridingizni turli qurilma o'lchamlari va yo'nalishlari uchun avtomatik responsive qiladi.

Swift•

AdaptiveGridView.swift

import SwiftUI

struct AdaptiveGridView: View {
let columns = [GridItem(.adaptive(minimum: 100))]

  var body: some View {
      ScrollView {
          LazyVGrid(columns: columns, spacing: 8) {
              ForEach(1...30, id: \.self) { item in
                  RoundedRectangle(cornerRadius: 8)
                      .fill(.purple.opacity(0.2))
                      .aspectRatio(1, contentMode: .fit)
                      .overlay {
                          Text("\(item)")
                              .fontWeight(.semibold)
                      }
              }
          }
          .padding()
      }
  }

}

Grid (qat'iy layout) — satr darajasida aniq nazorat

// Grid qat'iy, ma'lum kontent uchun — dinamik ro'yxatlar uchun emas
Grid(alignment: .leading, horizontalSpacing: 20, verticalSpacing: 12) {
    GridRow {
        Text("Ism").fontWeight(.bold)
        Text("Ali Valiyev")
    }
    GridRow {
        Text("Mutaxassislik").fontWeight(.bold)
        Text("iOS Dasturchi")
    }
}

Grid view'i (LazyVGrid dan farqli) aniq GridRow konteynerlari ishlatadi. U satrlar bo'yicha katakchalarni avtomatik hizalaydi — shakl, jadval yoki qat'iy qatorlar soni bo'lgan taqqoslash layoutlari uchun juda mos.

Tezkor ma'lumotnoma

Vosita	Vazifasi
`GridItem(.flexible())`	Mavjud joyning teng ulushini oladigan ustun yaratadi. Uchta flexible = uchta teng ustun
`LazyVGrid(columns:spacing:)`	View-larni GridItem massiviga ko'ra ustunlarga joylashtiradi. `spacing:` satrlar orasidagi bo'shliq
`.aspectRatio(1, contentMode: .fit)`	Har bir katakni kvadrat qiladi — balandligi kengligiga teng. `1` — 1:1 nisbat degani
`LazyVGrid(columns:)`	Ustunlar massivi bilan aylanuvchi grid — lazy loading
`GridItem(.flexible())`	Mavjud kenglikning teng ulushini oladigan ustun
`GridItem(.fixed(n))`	Har doim aniq n nuqta keng bo'lgan ustun
`GridItem(.adaptive(minimum:))`	Minimal kenglikka ko'ra imkoni boricha ko'p ustun joylashtiradi
`Grid { GridRow { } }`	Satr darajasida aniq hizalama nazorati bo'lgan qat'iy grid
`.aspectRatio(1, contentMode: .fit)`	View-ni kvadrat qiladi — balandligi kengligiga teng

Topshiriq: iOS Photos uslubida Grid yaratish

Adaptive layout yordamida iOS Photos ga o'xshash grid yarating. Har bir katak kulrang fonli kvadrat bo'lsin va ichida markazlashgan SF Symbol rasmi ko'rinsin — Image(systemName: "photo") ishlatilsin. Minimal ustun kengligi 100 pt bo'lsin. Kataklar orasidagi bo'shliq 2 pt bo'lsin (real Photos ilova kabi zich). Butun tarkib aylanuvchi bo'lsin. Canvas-da tekshiring — kataklar to'liq kenglikda zich joylashishi kerak.