Layouts & Modifiers (VStack, HStack, ZStack)

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ဒီခန်းပြီးရင် ဘာတတ်သွားမလဲ

Layouts & Modifiers (VStack, HStack, ZStack) ကို ကြောက်စရာမလိုအောင် နားလည်မယ်
ကိုယ်တိုင် Xcode/SwiftUI code ကို run ကြည့်တတ်မယ်
Real project ထဲမှာ ဒီ concept ကို ချက်ချင်း အသုံးချတတ်မယ်

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

VStack က child view တွေကို vertical (အပေါ်-အောက်) စီပေးပါတယ် — HStack ကတော့ horizontal (ဘယ်-ညာ) စီပေးပါတယ်။ ZStack ကတော့ child view တွေကို overlap (တစ်ခုပေါ်တစ်ခု ထပ်) ဖြစ်အောင် placement လုပ်ပေးပါတယ် (ဥပမာ - image ပေါ်မှာ text overlay)။ Modifier က view တစ်ခုချင်းစီရဲ့ appearance/behavior (padding, frame, background color, onTapGesture) ကို chain (`.padding(16).background(Color.blue)`) ဖြင့် customize လုပ်ဖို့ toolkit ပါ.

လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်

Login screen တစ်ခု ဒီဇိုင်းရေးရင် — `VStack` ထဲမှာ logo (Image), email TextField, password TextField, login Button ကို vertical စီထားနိုင်ပါတယ် — `.padding(16)` ကို VStack ပေါ် ထည့်ရင် screen edge နဲ့ content ကြား space ရအောင် ထားလို့ရပါတယ်.

VStack = vertical layout, HStack = horizontal layout, ZStack = overlap layout
Modifier = padding/frame/background/onTapGesture ကို chain ဖြင့် customize
Modifier order က matter ပါတယ် (padding အရင် vs background အရင် ရလဒ်ကွာနိုင်)

အတူတူ ကြည့်မယ်

swift

struct LoginScreen: View {
    var body: some View {
        VStack {
            Text("Welcome Back")
                .font(.title)
            Spacer().frame(height: 16)
            HStack {
                Image(systemName: "envelope")
                Text("email@example.com")
            }
        }
        .padding()
    }
}

You should see

Simulator ပေါ်မှာ 'Welcome Back' text အောက်မှာ email icon + text ကို row အနေနဲ့ တွေ့ရမည်။

၅ မိနစ် စမ်းကြည့်

`LoginScreen` ကို ကိုယ်တိုင် expand လုပ်ကြည့်ပါ — email/password TextField ၂ ခုနဲ့ Login Button ကို VStack ထဲ ထပ်ထည့်ပြီး Simulator ပေါ် run ကြည့်ပါ။

သတိလေးတစ်ချက်

`.frame(maxWidth: .infinity)` ကို nested view တွေမှာ overuse ရင် layout ရဲ့ actual size ကို ခန့်မှန်းရခက်ခဲသွားနိုင်ပါတယ် — root level မှာသာ သုံးပြီး child views တွေမှာ specific size သုံးသင့်ပါတယ်။

ဒီနေရာမှာ လူအများမှားတတ်တယ်

Modifier order ကို သတိမထားခြင်း — `.padding().background(Color.blue)` နဲ့ `.background(Color.blue).padding()` က visual result မတူပါ
VStack/HStack ကို nest (တစ်ခုထဲတစ်ခု) လုပ်ရာမှာ ရှုပ်ထွေးအောင် ထပ်ခါထပ်ခါ nest လုပ်ခြင်း — View ခွဲရေးသင့်ပါတယ်

အခု ကိုယ်တိုင် စမ်းကြည့်

You'll know it worked when: Simulator ပေါ်မှာ 'Welcome Back' text အောက်မှာ email icon + text ကို row အနေနဲ့ တွေ့ရမည်။