【筆記】Jetpack Compose Navigation 跳頁範例（By ChatGPT）

以下是一個 Jetpack Compose 裡使用 Navigation 跳頁並帶有參數傳遞的例子。

首先，需要將 Navigation 相關的 library 加入到 app 的 build.gradle 檔案裡面：

dependencies {
    // ... other dependencies
    implementation "androidx.navigation:navigation-compose:2.4.0-alpha10"
}

接著，在 Composable 函式中，可以使用 NavController 來進行跳頁。

@Composable
fun MainScreen(navController: NavController) {
    // 在這個 Composable 函式中，可以獲取到 NavController 物件
    // 可以使用 NavHost 跟 NavComposeRoute 來設定路由的資訊
    NavHost(navController = navController, startDestination = "home") {
        composable("home") {
            HomeScreen(navController)
        }
        composable(
            "detail/{itemId}",
            arguments = listOf(
                navArgument("itemId") { type = NavType.LongType }
            )
        ) { backStackEntry ->
            val itemId = backStackEntry.arguments?.getLong("itemId")
            DetailScreen(itemId)
        }
    }
}

@Composable
fun HomeScreen(navController: NavController) {
    // 當要進行跳頁時，可以呼叫 NavController 的 navigate 方法
    Button(onClick = { navController.navigate("detail/123") }) {
        Text("Go to Detail Screen")
    }
}

@Composable
fun DetailScreen(itemId: Long?) {
    // 在這個畫面中，可以使用傳遞進來的 itemId 來顯示相關的內容
    Text(text = "Item Id: $itemId")
}

在上面的例子中，我們使用 composable 函式來設定路由的資訊，並且在第二個路由中使用了 arguments 參數，這樣就可以將需要傳遞的參數設定在這個路由中。

在 HomeScreen 中，當使用者點擊按鈕時，我們可以呼叫 navController.navigate 方法來進行跳頁，同時也可以傳遞需要的參數。

在 DetailScreen 中，可以使用傳遞進來的參數來顯示相關的內容。

你也可以使用 sealed class 或 enum 來取代每個 composable 函式的名稱，這樣可以讓你的程式碼更加簡潔，同時也可以避免手動輸入字串而產生的錯誤。

以下是一個使用 sealed class 來定義畫面的範例：

sealed class Screen(val route: String) {
    object Home : Screen("home")
    data class Detail(val itemId: Long) : Screen("detail/$itemId")
}

@Composable
fun MainScreen(navController: NavController) {
    NavHost(navController = navController, startDestination = Screen.Home.route) {
        composable(Screen.Home.route) {
            HomeScreen(navController)
        }
        composable(Screen.Detail.route) { backStackEntry ->
            val itemId = backStackEntry.arguments?.getLong("itemId")
            DetailScreen(itemId)
        }
    }
}

@Composable
fun HomeScreen(navController: NavController) {
    Button(onClick = { navController.navigate(Screen.Detail(123).route) }) {
        Text("Go to Detail Screen")
    }
}

@Composable
fun DetailScreen(itemId: Long?) {
    Text(text = "Item Id: $itemId")
}

在上面的例子中，我們使用了 sealed class Screen 來定義畫面，並在每個畫面中定義了對應的 route 字串。在 MainScreen 中，我們可以使用 Screen.Home.route 和 Screen.Detail.route 來代表對應的路由，而不需要手動輸入字串。

在 HomeScreen 中，我們可以使用 Screen.Detail(123).route 來產生 Detail 畫面的路由，同時也可以將需要傳遞的參數放在建構子中。

在 DetailScreen 中，我們可以直接使用傳遞進來的 itemId 來顯示相關的內容。