Thuta Learning
ရှာဖွေရန်
IntermediateMobile Developmentintermediate

Navigation Basics (NavHost, NavController)

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

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

  • Navigation Basics (NavHost, NavController) ကို ကြောက်စရာမလိုအောင် နားလည်မယ်
  • ကိုယ်တိုင် Android Studio/Compose code ကို run ကြည့်တတ်မယ်
  • Real project ထဲမှာ ဒီ concept ကို ချက်ချင်း အသုံးချတတ်မယ်

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

`NavController` က screen ကူးပြောင်းမှု (navigate to, go back) ကို control လုပ်တဲ့ object ပါ — `NavHost` ကတော့ route (screen name string) တစ်ခုချင်းစီကို composable function နဲ့ ချိတ်ဆက်ပေးတဲ့ container ပါ။ `navController.navigate("home")` ခေါ်ရင် 'home' route ရဲ့ composable ဆီ ကူးပြောင်းသွားပါတယ် — `popBackStack()` ခေါ်ရင် back button ကို tap တဲ့ လိုမျိုး ယခင် screen ဆီ ပြန်သွားပါတယ်.

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

`NavHost(navController, startDestination = "login") { composable("login") { LoginScreen(onLoginSuccess = { navController.navigate("home") }) }; composable("home") { HomeScreen() } }` လို့ setup လုပ်ထားရင် — login button click ရင် `navController.navigate("home")` ခေါ်ပြီး HomeScreen ဆီ ကူးပြောင်းနိုင်ပါတယ်.

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

kotlin
@Composable
fun AppNavigation() {
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = "login") {
        composable("login") {
            LoginScreen(onLoginSuccess = {
                navController.navigate("home")
            })
        }
        composable("home") {
            HomeScreen(onLogout = {
                navController.popBackStack()
            })
        }
    }
}
You should see
Login screen ကနေ login ပြီးရင် Home screen ဆီ automatic ကူးပြောင်းသွားတာ တွေ့ရမည်။

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

`AppNavigation` ကို run ကြည့်ပြီး LoginScreen → HomeScreen ကူးပြောင်းမှုကို emulator ပေါ်မှာ တကယ် စမ်းကြည့်ပါ — physical device ရဲ့ Back button ကို နှိပ်ကြည့်ပြီး LoginScreen ဆီ ပြန်ရောက်တာ confirm လုပ်ကြည့်ပါ။

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

Login screen ကနေ Home screen ကူးပြောင်းပြီးရင် `popBackStack()` ဒါမှမဟုတ် navigation options (`popUpTo`) ကို သတိမထားရင်, Home screen ကနေ Back button နှိပ်လိုက်ရင် Login screen ကို ပြန်ရောက်သွားနိုင်ပါတယ် (user login ပြီးသားပါလျက်) — production app မှာ ဒီ UX gap ကို ပြင်ဆင်ရပါမယ်။

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

  • Route name string ကို (`"home"`) typo ရေးမိခြင်း — navigate ခေါ်ရင် screen not found error ဖြစ်နိုင်ပါတယ်
  • Sensitive data (password) ကို navigation argument အဖြစ် route string ထဲ တိုက်ရိုက် ထည့်ပို့ခြင်း — navigation argument က log/history ထဲ ကျန်ရှိနိုင်ပါတယ်

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

`AppNavigation` ကို run ကြည့်ပြီး LoginScreen → HomeScreen ကူးပြောင်းမှုကို emulator ပေါ်မှာ တကယ် စမ်းကြည့်ပါ — physical device ရဲ့ Back button ကို နှိပ်ကြည့်ပြီး LoginScreen ဆီ ပြန်ရောက်တာ confirm လုပ်ကြည့်ပါ။

You'll know it worked when: Login screen ကနေ login ပြီးရင် Home screen ဆီ automatic ကူးပြောင်းသွားတာ တွေ့ရမည်။

Navigation Basics (NavHost, NavController) | Thuta Learning