Layouts & Modifiers (Column, Row, Box)

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

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

Layouts & Modifiers (Column, Row, Box) ကို ကြောက်စရာမလိုအောင် နားလည်မယ်
ကိုယ်တိုင် Android Studio/Compose code ကို run ကြည့်တတ်မယ်
Real project ထဲမှာ ဒီ concept ကို ချက်ချင်း အသုံးချတတ်မယ်

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

Column က child composable တွေကို vertical (အပေါ်-အောက်) စီပေးပါတယ် — Row ကတော့ horizontal (ဘယ်-ညာ) စီပေးပါတယ်။ Box ကတော့ child composable တွေကို overlap (တစ်ခုပေါ်တစ်ခု ထပ်) ဖြစ်အောင် placement လုပ်ပေးပါတယ် (ဥပမာ - image ပေါ်မှာ text overlay)။ Modifier က composable တစ်ခုချင်းစီရဲ့ appearance/behavior (padding, size, background color, clickable) ကို chain (`.padding(16.dp).background(Color.Blue)`) ဖြင့် customize လုပ်ဖို့ toolkit ပါ.

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

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

Column = vertical layout, Row = horizontal layout, Box = overlap layout
Modifier = padding/size/background/clickable ကို chain ဖြင့် customize
Modifier order က matter ပါတယ် (padding အရင် vs background အရင် ရလဒ်ကွာနိုင်)

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

kotlin

@Composable
fun LoginScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Welcome Back", fontSize = 24.sp)
        Spacer(modifier = Modifier.height(16.dp))
        Row {
            Icon(Icons.Default.Email, contentDescription = null)
            Text("email@example.com")
        }
    }
}

You should see

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

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

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

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

`Modifier.fillMaxSize()` ကို nested composable တွေမှာ overuse ရင် layout ရဲ့ actual size ကို ခန့်မှန်းရခက်ခဲသွားနိုင်ပါတယ် — root level မှာသာ သုံးပြီး child တွေမှာ specific size/weight သုံးသင့်ပါတယ်။

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

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

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

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