Published on

Layout konteynerlari: VStack, HStack, ZStack

Authors

Hozirgacha sizning viewlaringiz (views) ekranda yolg'iz o'zi joylashgan edi. Bu bitta element uchun yaxshi ishlaydi, lekin haqiqiy ilova interfeyslari o'nlab viewlarni birlashtiradi β€” ularning ba'zilari vertikal ravishda joylashadi, ba'zilari yonma-yon, ba'zilari esa bir-birining ustiga qatlamlanadi. Ushbu darsda bularning barchasini amalga oshirish imkonini beruvchi uchta asosiy konteyner bilan tanishamiz.

Jismoniy makonni qanday tasvirlashingiz haqida o'ylab ko'ring: "yorliq tugmaning tepasida turibdi," "ikonka sarlavhaning chap tomonida joylashgan," "belgi (badge) rasmning ustida turibdi." SwiftUI-da ushbu har bir bog'liqlik uchun alohida konteyner vaqtinchalik mavjud: vertikal joylashuv uchun VStack, gorizontal uchun HStack va qatlamli (ustma-ust) joylashuv uchun ZStack. Siz viewlarni xuddi qutidagi narsalar kabi ularning ichiga joylashtirasiz (nesting qilasiz).

Ushbu darsning oxiriga kelib, siz har bir stack qanday ishlashini, ularni qanday birlashtirishni hamda ularning tekislanishi (alignment) va elementlar orasidagi masofani (spacing) qanday boshqarishni bilib olasiz. Ushbu uchta konteyner siz yaratadigan deyarli har bir SwiftUI interfeysining asosi hisoblanadi.

Stack'lar qanday ishlaydi

Swift
Stack turlarining ishlashi
// VStack o'z bolalarini tepadan pastga qarab joylashtiradi VStack { Text("Birinchi") Text("Ikkinchi") Text("Uchinchi") } // HStack o'z bolalarini chapdan o'ngga, yonma-yon joylashtiradi HStack { Image(systemName: "star.fill") Text("Sevimlilar") } // ZStack o'z bolalarini orqadan oldinga, ustma-ust joylashtiradi ZStack { // Orqa fon qatlami β€” birinchi render qilinadi va eng orqada ko'rinini Color.blue // Oldingi qatlam β€” oxirgi render qilinadi va tepada ko'rinadi Text("Tepada") .foregroundStyle(.white) }
KonteynerBolalarini qanday joylashtiradi
VStack { }Ko'rinishlarni vertikal ravishda joylashtiradi β€” birinchi bola eng tepada, oxirgi bola eng pastda bo'ladi.
HStack { }Ko'rinishlarni gorizontal ravishda joylashtiradi β€” birinchi bola chap tomonda, oxirgi bola o'ng tomonda bo'ladi.
ZStack { }Ko'rinishlarni bir-birining ustiga qatlamlaydi β€” birinchi bola eng orqa fonda, oxirgi bola eng tepada bo'ladi.

Uchta stack konteyneri

VStackKo'rinishlarni ixtiyoriy tekislash (alignment) va masofa (spacing) bilan vertikal ravishda tartiblaydi.
Swift
VStack alignment va spacing bilan
// Chap tomondan tekislangan va elementlari orasida 12pt masofa bo'lgan VStack VStack(alignment: .leading, spacing: 12) { Text("Chris Ching") .font(.title) .fontWeight(.bold) Text("iOS Developer") .font(.subheadline) .foregroundStyle(.secondary) }

alignment: parametri bolalarning stack ichida gorizontal ravishda qanday tekislanishini nazorat qiladi β€” .leading (chapga), .center (sukut bo'yicha - o'rtaga) yoki .trailing (o'ngga). spacing: esa har bir bola ko'rinish orasidagi masofani (point o'lchamida) belgilaydi.

HStackKo'rinishlarni ixtiyoriy tekislash va masofa bilan yonma-yon joylashtiradi.
Swift
HStack va Spacer
// Elementlarni ikki chetga surish uchun Spacer ishlatilgan HStack HStack { Text("Username") .font(.headline) // Spacer iki ko'rinish orasidagi barcha mavjud bo'sh joyni egallaydi Spacer() Image(systemName: "chevron.right") .foregroundStyle(.secondary) }

Spacer() β€” SwiftUI interfeysini loyihalashdagi eng foydali vositalardan biridir. U stack yo'nalishi bo'yicha barcha mavjud bo'sh joyni egallash uchun kengayadi va shu orqali qo'shni viewlarni chetga surib yuboradi. Masalan, o'rtasiga Spacer qo'yilgan HStack-da chapdagi element chap chetga, o'ngdagi element esa o'ng chetga suriladi.

ZStackKo'rinishlarni bir-birining ustiga (orqama-ketma) qatlamlaydi.
Swift
ZStack bilan karta dizayni
// Rasm va matn qatlamidan iborat karta uchun ZStack ZStack(alignment: .bottomLeading) { // Orqa fondagi ko'k to'rtburchak butun freymni to'ldiradi Color.blue .frame(width: 300, height: 200) .cornerRadius(16) // Matn uning ustida, pastki chap burchakka tekislangan holda joylashadi Text("Mountain View") .font(.title2) .fontWeight(.bold) .foregroundStyle(.white) .padding() }

ZStack-ning alignment: parametri qatlamlangan elementlarning stack chegarasi ichida qayerda joylashishini belgilaydi. Undan foydalanib, matnni orqa fondagi tasvirning istalgan burchagiga yoki markaziga tekislashingiz mumkin.

Nested StacksMurakkab tartiblarni yaratish uchun stack'larni bir-birining ichiga joylashtirish.
Swift
Ichma-ich joylashgan stack'lar
// Chapda ikonka va o'ngda vertikal joylashgan matnlar β€” klassik ro'yxat qatori andozasi HStack(spacing: 14) { // Chap tomondagi ikonka Image(systemName: "person.circle.fill") .font(.largeTitle) .foregroundStyle(.blue) // O'ng tomondagi vertikal joylashgan matn tafsilotlari VStack(alignment: .leading, spacing: 4) { Text("Chris Ching") .font(.headline) Text("iOS Educator") .font(.caption) .foregroundStyle(.secondary) } }

Stack'larni bir-birining ichiga joylashtirish (nesting) β€” murakkab va professional interfeyslarni qurishning asosiy usulidir. HStack ichida VStack joylashtirish orqali siz deyarli barcha iOS ilovalari ro'yxatlarida, profil kartalarida va sozlamalar ekranlarida uchraydigan "chapda ikonka, o'ngda ikki qatorli matn" andozasini osongina yaratishingiz mumkin.

πŸ’‘ Stack ichida maksimal 10 ta element:
SwiftUI-dagi har qanday stack bevosita o'z ichiga ko'pi bilan 10 ta bola ko'rinishni (child views) qabul qila oladi. Agar sizga bundan ko'proq element kerak bo'lsa, ularning bir qismini Group { } konteyneriga o'rashingiz lozim. Amaliyotda 10 tadan ortiq to'g'ridan-to'g'ri bolaga ehtiyoj kamdan-kam seziladi, biroq buni oldindan bilib qo'ygan yaxshi.

Tezkor ma'lumotnoma (quick reference)

SintaksisU nima vazifa bajaradi
VStack { }Ko'rinishlarni tepadan pastga joylashtiradi, sukut bo'yicha markazga tekislaydi
VStack(alignment: .leading) { }Ko'rinishlarni tepadan pastga joylashtiradi, chap tomonga tekislaydi
VStack(spacing: 12) { }Ko'rinishlarni elementlar orasida 12pt masofa qoldirib vertikal joylashtiradi
HStack { }Ko'rinishlarni yonma-yon joylashtiradi, vertikal markaz bo'yicha tekislaydi
ZStack { }Ko'rinishlarni markaz bo'yicha ustma-ust qatlamlaydi
ZStack(alignment: .bottomLeading) { }Ko'rinishlarni ustma-ust qatlamlab, pastki chap burchakka tekislaydi
Spacer()Stack yo'nalishi bo'yicha barcha mavjud bo'shliqni to'ldiradi

Sun'iy intellektdan chuqurroq o'rganish uchun foydalanish

1. Tushunchalarni chuqurlashtirish (ai'dan repetitor sifatida foydalaning):

  • "Men SwiftUI-dagi VStack, HStack va ZStack tushunchalarini o'rganyapman. Iltimos, menga biror UI tartibini oddiy tilda tasvirlab bering (masalan: 'chapda rasm, o'ngda tepama-tashlangan sarlavha va taglavha') va mendan qaysi stack'larni ishlatishim va ularni qanday joylashtirishim kerakligini so'rang. Savollarni bittalab bering va javoblarimni tekshiring."
  • "SwiftUI-da Spacer() nima va u VStack hamda HStack ichida qanday turlicha ishlaydi? Kod yozmasdan, avval tushunchani tushuntirib bering, keyin esa oddiy kod misolini ko'rsating."

2. Amaliy ko'rinish yaratish (xcode-da sinab ko'rish uchun):

  • "iOS kontaktlar ilovasidagi kabi kontakt qatorini yaratish uchun ichma-ich joylashgan VStack va HStack ishlatilgan SwiftUI Viewni yozib bering. Unda avatar ikonka, ism va telefon raqami bo'lsin. Har bir qator kodning tepasida u qanday vazifa bajarayotganini va nima uchun aynan shu stack tanlanganini yangi boshlovchiga tushuntirgandek izohlab yozing."

🎯 Topshiriq: statistika qatori yaratish

Ijtimoiy tarmoq profillarida ko'rish mumkin bo'lgan, uchta statistikadan tashkil topgan gorizontal qatorni yarating. Har bir statistika ustunida tepada qalin shriftda raqam va pastida shaxsiy xira matn bo'lishi kerak (masalan, "248" tepada va uning tagida "Posts", "12K" va tagida "Followers", "540" va tagida "Following"). Ushbu uchta ustun butun ekran kengligi bo'ylab tekis joylashishi uchun Spacer()dan foydalaning.

Swift
Topshiriq Yechimi
import SwiftUI struct ContentView: View { var body: some View { HStack { Spacer() VStack { Text("248") .font(.title2) .fontWeight(.bold) Text("Posts") .font(.caption) .foregroundStyle(.secondary) } Spacer() VStack { Text("12K") .font(.title2) .fontWeight(.bold) Text("Followers") .font(.caption) .foregroundStyle(.secondary) } Spacer() VStack { Text("540") .font(.title2) .fontWeight(.bold) Text("Following") .font(.caption) .foregroundStyle(.secondary) } Spacer() } } }

πŸ’‘ Maslahat:
Sizga bitta gorizontal HStack ichida uchta alohida VStack kerak bo'ladi. Ular ekran bo'ylab tekis masofada tarqalishi uchun VStacks va chetlar orasiga Spacer() qo'ying. Raqamga .font(.title2).fontWeight(.bold) va tagtag matnga .font(.caption).foregroundStyle(.secondary) modifikatorlarini qo'llang.

Buy mea coffee