Jetpack Compose Basics

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

အရင်တုန်းက Android UI ကို XML file သီးခြားရေးပြီး, Kotlin code ကနေ ချိတ်ဆက်ရပါတယ် (imperative, 'ဒီ view ကို ဒီလို update လုပ်ပါ' ဆိုတဲ့ ပုံစံ)။ Jetpack Compose ကတော့ declarative UI toolkit ပါ — `@Composable` function ထဲမှာ 'UI ဘယ်လို ပုံစံ ဖြစ်စေချင်တယ်' ဆိုတာကို Kotlin code နဲ့ တိုက်ရိုက် ရေးပါတယ်, data ပြောင်းလဲတိုင်း Compose က UI ကို automatic re-draw ပေးပါတယ် — React/Flutter ရဲ့ declarative UI concept နဲ့ ဆင်တူပါတယ်.

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

`@Composable fun Greeting(name: String) { Text("Hello, $name!") }` လို့ ရေးလိုက်ရင်, `Greeting("Aye Aye")` ကို ခေါ်တာနဲ့ 'Hello, Aye Aye!' ဆိုတဲ့ text ကို screen ပေါ် ပြပေးပါတယ် — XML layout file တစ်ခုမှ ရေးစရာ မလိုပါဘူး။ `@Preview` annotation ကို ထည့်ရင် Android Studio ထဲမှာ emulator run စရာ မလိုဘဲ UI ကို ချက်ချင်း ကြည့်လို့ရပါတယ်.

• Jetpack Compose = Google ရဲ့ modern declarative UI toolkit (XML မလို)
• @Composable function = UI component ကို describe လုပ်သော function
• Data ပြောင်းရင် Compose က UI ကို automatic re-draw ပေး

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

import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    Greeting(name = "Aye Aye")
}

Android Studio Preview panel ထဲမှာ 'Hello, Aye Aye!' ဆိုတဲ့ text ကို emulator run စရာမလိုဘဲ ချက်ချင်း တွေ့ရမည်။