Android Jetpack Compose 導航(Navigation)示範

在 Jetpack Compose 中一個「頁面」的存在感被削弱，因為不用單獨定義 xml 檔案，全部都是使用 kotlin 定義的 Composable 方法。
不過頁面依然存在，多個頁面之間的跳轉、返回上一頁等依然很複雜，Navigation 能夠很好的幫助我們處理。

安裝套件

開啟 build.gradle.kts (Module :app) 加入下面的程式碼：

    
dependencies {
    val nav_version = "2.7.6"
    implementation("androidx.navigation:navigation-compose:$nav_version")
}
    

導航(Navigation)範例

下面是一個基本的 Navigation 範例，在 NavHost 的 startDestination 指定開始時的頁面是 home ，在裡面有定義兩個可以導航的頁面，home 和 settings。

    
@Composable
fun MainScanner() {
    // 導航控制器
    val navController = rememberNavController()

    // 定義導航的起點和每個頁面
    NavHost(
        navController = navController,
        startDestination = "home" // 起點路徑
    ) {

        // 定義可導航的頁面
        composable("home") { // 路徑: home
            Home(navController)
        }
        composable("settings") { // 路徑: settings
            Settings(navController)
        }

    }
}
    

home 和 settings 兩個頁面的內容如下：

    
@Composable
fun Home(navController: NavController) {
    Column {
        Text("Home")

		// 切換到 Settings 頁面的按鈕
        Button(onClick = {
            navController.navigate("settings")
        }) {
            Text("切換到 Settings 頁面")
        }
    }
}

@Composable
fun Settings(navController: NavController) {
    Column {
        Text("Settings")

		// 切換到 Home 頁面的按鈕
        Button(onClick = {
            navController.navigate("home")
        }) {
            Text("切換到 Home 頁面")
        }

		// 切換到 Home 頁面的按鈕，並且會清除返回堆疊
        Button(onClick = {
            navController.navigate("home") {
                popUpTo("home") { // 清除返回的堆疊(BackStack)，無法使用返回按鍵回到上一頁
                    inclusive = true
                }
            }
        }) {
            Text("切換到 Home 頁面，並清除「返回」的頁面")
        }
    }
}
    

使用 navController.navigate("settings") 切換到設定頁面時，會自動在 BackStack 中增加，使用返回按鍵時就可以回到上一個頁面，想要切換頁面後不能夠回到上一頁，可以使用上面 popUpTo 的範例。

在 NavHost 的 {} 內部， 除了使用 composable ，還可以使用 navigation ，相當於把 composable 群組起來：

    
@Composable
fun MainScanner() {
    // 導航控制器
    val navController = rememberNavController()

    // 定義導航的起點和每個頁面
    NavHost(
        navController = navController,
        startDestination = "auth" // 起點
    ) {

        // 定義可導航的頁面
        composable("home") { // 路徑: home
            Home(navController)
        }
        composable("settings") { // 路徑: settings
            Settings(navController)
        }

        navigation(
            route = "auth", // 路徑: auth
            startDestination = "login", // 指向此群組路徑時，會導航到 login 頁面
        ) {
            composable("login") { // 路徑: login
                Text(text = "Login")
            }
            composable("register") { // 路徑: register
                Text(text = "Register")
            }
            composable("forgot_password") { // 路徑: forgot_password
                Text(text = "Forgot Password")
            }
        }

    }
}
    

參考資料：
Android Developers - Navigation with Compose
StackOverflow - Is the navigation graph obsolete when I use Jetpack Compose Navigation?