Lists (LazyColumn, LazyRow)

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

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

`Column` က child composable အားလုံးကို တစ်ပြိုင်နက် render လုပ်ပါတယ် — item ၁၀၀၀ ရှိရင် screen ပေါ် မမြင်ရသေးတဲ့ item ၉၉၀ ကိုပါ render လုပ်နေလို့ performance ကျဆင်းနိုင်ပါတယ်။ `LazyColumn` ကတော့ RecyclerView (Android ရဲ့ traditional list component) လို 'lazy loading' လုပ်ပါတယ် — screen ပေါ်မှာ visible ဖြစ်နေတဲ့ item တွေကိုပဲ render လုပ်ပြီး, scroll လုပ်တာနဲ့အမျှ item အသစ်တွေကို render ပါတယ် — item အရေအတွက် များများနဲ့ smooth scroll လုပ်နိုင်ပါတယ်.

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

Todo list app မှာ `LazyColumn { items(todoList) { todo -> TodoRow(todo) } }` လို့ ရေးရင် — todo item ၁၀၀ ရှိပေမယ့် screen ပေါ်မှာ တစ်ချိန်တည်း visible ဖြစ်နေတဲ့ item ၅-၆ ခုကိုပဲ render လုပ်ပြီး, scroll လုပ်လိုက်ရင် item အသစ်တွေကို on-demand render ပေးပါတယ် — performance ပိုကောင်းပါတယ်.

LazyColumn = vertical scrollable list, visible item ကိုသာ render (lazy loading)
Column = child အားလုံးကို တစ်ပြိုင်နက် render (item များများအတွက် performance ကျဆင်းနိုင်)
items(list) { item -> ... } = LazyColumn ထဲမှာ data list ကို iterate လုပ်ခြင်း

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

kotlin

@Composable
fun TodoListScreen(todos: List<TodoItem>) {
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        contentPadding = PaddingValues(16.dp)
    ) {
        items(todos) { todo ->
            Row(
                modifier = Modifier.fillMaxWidth().padding(vertical = 8.dp)
            ) {
                Checkbox(checked = todo.isDone, onCheckedChange = {})
                Text(todo.title)
            }
        }
    }
}

You should see

Todo item ၅-၁၀ ခုကို scroll လုပ်ရင် smooth ဖြင့် ကြည့်ရှုနိုင်တဲ့ list ကို emulator ပေါ်မှာ တွေ့ရမည်။

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

`TodoItem` (Basic chapter data class) ရဲ့ list (item ၁၀ ခု sample data) ကို create ပြီး `TodoListScreen` ကို run ကြည့်ပါ — scroll လုပ်ကြည့်ပြီး smooth ဖြစ်တာ confirm လုပ်ကြည့်ပါ။

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

`LazyColumn` ထဲမှာ `Modifier.fillMaxHeight()` ပါတဲ့ child composable ထည့်ရင် crash (infinite height constraint) ဖြစ်နိုင်ပါတယ် — LazyColumn ရဲ့ child တွေက height ကို ကိုယ်တိုင် သတ်မှတ်သင့်ပါတယ်။