Grid’lar

SwiftUI maket: grid’lar

Elementlarni moslashuvchan grid maketlarida joylashtirish uchun LazyVGrid va LazyHGrid dan foydalaning.

Lazy grid’lar

Lazy grid’lar ko‘p sonli elementlarni grid ko‘rinishida ko‘rsatish uchun ishlatiladi.

Sintaksis:

• LazyVGrid(columns: columns, spacing: 12)
• LazyHGrid(rows: rows, spacing: 12)

import SwiftUI

struct GridDemo: View {
  let columns = [GridItem(.flexible()), GridItem(.flexible())]
  var body: some View {
    LazyVGrid(columns: columns, spacing: 12) {
      ForEach(1...6, id: \.self) { i in
        Text("Item \(i)")
          .frame(maxWidth: .infinity)
          .padding(12)
          .background(.blue.opacity(0.1))
          .cornerRadius(8)
      }
    }.padding()
  }
}

import SwiftUI

struct ContentView: View {
  var body: some View { GridDemo() }
}

import SwiftUI

@main
struct MyApp: App {
  var body: some Scene { WindowGroup { ContentView() } }
}

Yuqoridagi misolda grid har biri moslashuvchan kenglikka ega ikki ustunli LazyVGrid yordamida yaratilgan.

Moslashuvchan (adaptive) grid

Joy imkon bergancha har bir qatorga ko‘proq element sig‘dirish uchun adaptive ustunlardan foydalaning.

Sintaksis:

• [GridItem(.adaptive(minimum: 100))]
• LazyVGrid(columns: columns) { ... }

import SwiftUI

struct AdaptiveGridDemo: View {
  let columns = [GridItem(.adaptive(minimum: 100), spacing: 12)]
  var body: some View {
    LazyVGrid(columns: columns, spacing: 12) {
      ForEach(1...12, id: \.self) { i in
        Text("Card \(i)")
          .frame(maxWidth: .infinity, minHeight: 60)
          .background(.green.opacity(0.12))
          .cornerRadius(8)
      }
    }
    .padding()
  }
}

import SwiftUI

struct ContentView: View {
  var body: some View { AdaptiveGridDemo() }
}

import SwiftUI

@main
struct MyApp: App {
  var body: some Scene { WindowGroup { ContentView() } }
}

Yuqoridagi misolda grid har birining minimal kengligi 100 point bo‘lgan adaptive ustunli LazyVGrid yordamida yaratilgan.