Published on: Saturday, January 31, 2026

LazyVStack va LazyHStack

Authors

Name
ShoxruxC
@iOSdasturchi

Oddiy VStack yuklanish paytida barcha bola view-larni bir vaqtda yaratadi — ularning aksariyati ekran tashqarisida bo'lsa ham. Kichik miqdordagi view-lar uchun bu yaxshi ishlaydi, lekin ro'yxatda 500 ta qator bo'lsa, barchasini birdaniga yaratish xotirani isrof qiladi va ishlashni sekinlashtiradi. LazyVStack bu muammoni ekranda ko'rinib qolayotgan view-larni yaratish orqali hal qiladi.

Bu yerdagi "lazy" (dangasa) so'zi odatdagi ma'nosidagidek — ishni qilishi kerak bo'lguncha kutadi. LazyVStack satrni faqat ekranda ko'rinib qolayotganda yaratadi. Qatorlar ekrandan chiqib ketganda, xotiradan bo'shatilishi mumkin. Yuzlab yoki minglab qatorlari bo'lgan ilovalar shunday tez ishlaydi.

API VStack va HStack bilan bir xil — faqat nomini o'zgartirish kerak. Asosiy qoida: LazyVStack foydali bo'lishi uchun ScrollView ichida bo'lishi shart. ScrollView bo'lmasa, scrolling bo'lmaydi va "dangasa" bo'lishning hech bir sababi qolmaydi.

Swift•

ContentView.swift

import SwiftUI

struct ContentView: View {
var body: some View {
// ScrollView aylantiriladigan konteyner beradi
ScrollView {
// LazyVStack qatorlarni faqat ko'rinib qolayotganda yaratadi
LazyVStack(spacing: 12) {
// ForEach 1 dan 200 gacha har bir son uchun view yaratadi
ForEach(1...200, id: \.self) { number in
Text("Qator \(number)")
.frame(maxWidth: .infinity, alignment: .leading)
.padding()
.background(.white)
.cornerRadius(8)
}
}
.padding()
}
.background(Color(.systemGroupedBackground))
}
}

LazyVStack va LazyHStack variantlari

LazyHStack — gorizontal aylanuvchi kontent

// Lazy yuklash bilan gorizontal scroll view
ScrollView(.horizontal, showsIndicators: false) {
    // Kartalarni gorizontal ko'rinib qolayotganda yaratadi
    LazyHStack(spacing: 16) {
        ForEach(1...50, id: \.self) { i in
            // Har bir element uchun kvadrat karta
            RoundedRectangle(cornerRadius: 12)
                .fill(.blue.opacity(0.2))
                .frame(width: 120, height: 120)
                .overlay { Text("\(i)") }
        }
    }
    .padding()
}

Netflix uslubidagi gorizontal kontent qatorlari uchun gorizontal ScrollView ichida LazyHStack dan foydalaning. Bu pattern gorizontal aylanuvchi karusellar uchun standart yechim hisoblanadi.

Swift•

HorizontalCarouselView.swift

import SwiftUI

struct HorizontalCarouselView: View {
let colors: [Color] = [.blue, .purple, .pink, .orange, .green]

  var body: some View {
      ScrollView(.horizontal, showsIndicators: false) {
          LazyHStack(spacing: 16) {
              ForEach(1...20, id: \.self) { i in
                  RoundedRectangle(cornerRadius: 16)
                      .fill(colors[(i-1) % colors.count].gradient)
                      .frame(width: 160, height: 200)
                      .overlay {
                          Text("\(i)")
                              .font(.largeTitle)
                              .fontWeight(.bold)
                              .foregroundStyle(.white)
                      }
              }
          }
          .padding(.horizontal)
      }
  }

}

Qo'shilib qoladigan bo'lim sarlavhalari (pinned headers)

ScrollView {
    LazyVStack(pinnedViews: [.sectionHeaders]) {
        Section {
            ForEach(1...20, id: \.self) { i in
                Text("Element \(i)").padding()
            }
        } header: {
            // Bu sarlavha bo'lim o'tayotganda yuqorida qoladi
            Text("A Bo'lim")
                .font(.headline)
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding()
                .background(.white)
        }
    }
}

LazyVStack dagi pinnedViews: parametri bo'lim sarlavhalarini kontent o'tayotganda yuqorida qolishiga imkon beradi — iOS Kontaktlar yoki Kalendaridagi xuddi shunday xatti-harakat.

VStack vs LazyVStack: Kichik miqdordagi view-lar (20–30 tagacha) uchun oddiy VStack — soddaroq va bir xil tez. Faqat view-lar soni katta yoki dinamik bo'lganda LazyVStackga o'ting. Ko'pchilik oddiy joylashuvlar uchun VStack to'g'ri tanlov.

Tezkor ma'lumotnoma

Vosita	Vazifasi
`ScrollView { }`	Tarkibini aylantiriladigan qiladi. Usiz LazyVStack joyni aylantirish imkoni yo'q va barcha view-larni bir vaqtda yaratadi
`LazyVStack(spacing: 12)`	Talab bo'yicha view yaratadigan vertikal stack. spacing parametri har bir qator orasiga 12 pt bo'shliq qo'shadi
`ForEach(1...200, id: \.self)`	200 ta iteratsiya yaratadi. `id: \.self` SwiftUI-ga har bir butun sonni o'ziga xos identifikator sifatida ishlatishini aytadi
`LazyVStack`	Ko'rinib qolayotganda view-larni talab bo'yicha yaratadigan vertikal stack
`LazyHStack`	Xuddi shunday, gorizontal yo'nalish
`ScrollView(.vertical)`	Vertikal scroll konteyner — LazyVStack uchun zarur o'rov
`ScrollView(.horizontal)`	Gorizontal scroll konteyner — LazyHStack uchun zarur o'rov
`pinnedViews: [.sectionHeaders]`	Bo'lim sarlavhalarini scroll paytida yuqori chetda ushlab turadi

Topshiriq: gorizontal aylanuvchi kartalar qatori

Gorizontal aylanuvchi kartalar qatori yarating. Har bir karta 160 pt keng va 200 pt baland bo'lsin, 16 pt burchak radiusi va element raqamiga qarab o'zgaradigan gradient foniga ega bo'lsin. [.blue, .purple, .pink, .orange, .green] ni colors massivi sifatida ishlating va colors[i % colors.count] orqali ulardan navbatlab foydalaning. Har bir kartada markazda raqam ko'rinsin. Qator scroll indikatorlarini ko'rsatmasdan aylanishi kerak. Canvas-da tekshiring — rangli kartalar gorizontal aylansa kerak.