HStack VStack ZStack (HStack VStack ZStack)
در SwiftUI، «پشته (Stack)» یعنی چیدن نماها منظم و ساده. VStack عمودی می چیند. HStack افقی می چیند. ZStack لایه ای می چیند. مثل گذاشتن کتاب ها روی هم، کنار هم، یا روی یک میز.
نمونه پایه: چیدمان با پشته ها
در این نمونه از VStack، HStack، ZStack و Spacer استفاده می کنیم. «Spacer» فاصله ساز است؛ عناصر را از هم دور می کند.
import SwiftUI
// Demo.swift
struct StackDemo: View {
var body: some View {
VStack(spacing: 12) {
Text("Title")
.font(.title)
HStack {
Text("Left")
Spacer()
Text("Right")
}
ZStack {
Color.blue.opacity(0.1)
Text("Overlay")
}
}
.padding()
}
}
import SwiftUI
// ContentView.swift
struct ContentView: View {
var body: some View {
StackDemo()
}
}
import SwiftUI
// App.swift
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
نکته: اگر چیدمان شلوغ شد، از VStack توی HStack استفاده کن. سپس کنترل بیشتری داری.
روی هم گذاری و تراز
ZStack محتوا را لایه لایه می چیند. «تراز (Alignment)» جای عناصر را مشخص می کند. «راهنمای تراز (alignmentGuide)» قانون سفارشی تراز است.
import SwiftUI
// Demo.swift
struct OverlayDemo: View {
var body: some View {
ZStack(alignment: .topLeading) {
Image(systemName: "rectangle.fill")
.resizable()
.foregroundStyle(.blue.opacity(0.15))
Text("Badge")
.padding(6)
.background(.ultraThinMaterial, in: Capsule())
.alignmentGuide(.top) { d in
d[.bottom]
}
}
.frame(width: 220, height: 120)
.padding()
}
}
import SwiftUI
// ContentView.swift
struct ContentView: View {
var body: some View {
OverlayDemo()
}
}
import SwiftUI
// App.swift
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
برای مرور بیشتر، صفحه پشته های SwiftUI را ببین. سپس به Spacer و Alignment سر بزن.
گام های تمرینی سریع
- یک VStack بساز و سه Text اضافه کن.
- میان Textها Spacer بگذار تا جدا شوند.
- یک ZStack بساز و یک برچسب گوشه بالا بچسبان.
جمع بندی سریع
- VStack عمودی، HStack افقی، ZStack لایه ای است.
- Spacer فاصله ها را هوشمند مدیریت می کند.
- alignment و alignmentGuide جای دقیق عناصر را می دهند.
- از ترکیب پشته ها برای چیدمان های پیچیده استفاده کن.