前言

   使用fragment 轉跳頁面就會用到 Navigation 元件呀!

什麼是 Compose Navigation？

Compose Navigation 是 Jetpack Compose 提供的一個強大工具，用於在 Android 應用程式中管理導航。它提供了一種宣告式的方式來定義導航目的地、在目的地之間導航以及處理深層連結。

核心概念

• 目的地 (Destinations): 代表應用程式中的不同畫面或視圖。
• NavHost: 主持導航圖，並顯示當前的目的地。
• NavGraph: 定義導航層級結構以及目的地之間的關係。
• NavBackStackEntry: 代表導航返回堆疊中的單一條目。

基本用法

創建 NavHost:

NavHost(
            navController = navController,
            startDestination = MooncakeScreen.Start.name,
            modifier = Modifier
                .fillMaxSize()
                .verticalScroll(rememberScrollState())
                .padding(innerPadding)
        ) {
            composable(route = MooncakeScreen.Start.name) {
                StartOrderScreen(
                    quantityOptions = Datasource().quantityOptions(),
                    onNextButtonClicked = {
                        viewModel.setQuantity(it)
                        navController.navigate(MooncakeScreen.Flavor.name)
                    },
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(dimensionResource(R.dimen.padding_medium))
                )
            }

在目的地之間導航:

onNextButtonClicked = {
       viewModel.setQuantity(it)
       
       navController.navigate(MooncakeScreen.Flavor.name)
    },

onNextButtonClicked = { navController.navigate(MooncakeScreen.Pickup.name) },

onNextButtonClicked = { navController.navigate(MooncakeScreen.Summary.name) },

轉跳到開始畫面

navController.popBackStack(MooncakeScreen.Start.name, inclusive = false)

執行結果

page1

page2

page3

page4

參考

https://developer.android.com/codelabs/basic-android-kotlin-compose-navigation