重要元件

NavController

這是整個 Navigation compose 的核心元件,它會追蹤 composable 的 back stack 和 state。

val navController = rememberNavController()

Navigation Graph

Navigation Graph 其實就是一些目標視窗 (destination screen or destination composable) 的組合,我們把目標視窗當做一個 route,使用 composable() 這個函式來定義,並會對其命名。

{
    composable("intro") { 
        IntroScreen() 
    }
    composable("login") { 
        LoginScreen() 
    }
    composable("register") {
        RegisterScreen()
    }
}

NavHost

NavHost 做為 NavigationGraph 的存放處,它連結 NavController,並使用 NavController 來控制 navigation

val navController = rememberNavController()

NavHost(
    navController = navController,
    startDestination = "intro"
) {
    composable(route = "intro") {
        IntroScreen()
    }
    composable(route = "register") {
        RegisterScreen()
    }
    composable(route = "login") {
        LoginScreen()
    }
}

依賴

implementation "androidx.navigation:navigation-compose:2.9.0"

重要歷程

Navigation Compose 在 2.8.0 後,加入了對 typs saft argument 的支援

範例程式

參考資料

Navigation 2

Philipp

Jetpack Compose Navigation for Beginners – Android Studio Tutorial

Full Guide to Nested Navigation Graphs in Jetpack Compose

Type-Safe Navigation with the OFFICIAL Compose Navigation Library

Should You Use a Navigation Library in Jetpack Compose?

Why I Stopped Using popBackStack() to Navigate Back

Google Official

Navigation with Compose

CodeLab: Jetpack Compose Navigation

Navigation Compose meet Type Safety

Other

Navigation in Jetpack compose. Full guide Beginner to Advanced.

Compose Navigation: Scalable & Maintainable Setup

深入理解 Compose Navigation 实现原理

Navigation 3

Announcing Jetpack Navigation 3

Last modified: 2025 年 6 月 27 日

Author

Comments

Write a Reply or Comment

Your email address will not be published.