jetpack compose navigationを使って楽に値付き遷移処理を実装する

はじめに

今回はjetpack compose navigationを使って値付き遷移処理を実装するときに意識すると楽になることを紹介していきます

本文

まずは下記のように一箇所のファイルに遷移用のルート、遷移宣言処理、表示処理の３つをまとめておきます。
下記のようにすることで画面数が把握しやすい上に、どの画面からでも該当画面に遷移させるときは該当の遷移処理を呼び出すのみになります。
また、表示処理をまとめておくことで１つのファイル内を検索すれば何を引数として渡していてどの遷移処理がよばれるときにどの画面が表示されるのかが把握しやすくなります。

HogeNavigation

object HogeNav {
// routeを一箇所にまとめておく
    const val hoge = "hoge_view/{id}"
}

// 遷移宣言用の処理を実装して引数のみを渡せばいいようにしておく
fun NavController.navigateToHogeView(id: Int) {
    this.navigate(HogeNav.hoge.replace("{id}", id.toString()))
}

// 表示処理を実装する
fun NavGraphBuilder.hogeView(navController: NavHostController) {
    composable(
        route = HogeNav.hoge,
        arguments = listOf(
            navArgument("id") { type = NavType.IntType }
        )
    ) {
        val id = checkNotNull(it.arguments).getInt("id")
        HogeView(
            navController = navController,
            viewModel = hiltViewModel(),
            id = id
        )
    }
}

次にNavHostに対して先ほど実装しておいた表示処理を追加します

NavHost

NavHost(
        navController = navController,
        startDestination = HogeNav.hoge,
        modifier = modifier
    ) {
        hogeView(navController)
    }

最後に

今回は今後増えていくjetpack compose navigationの実践的な実装方法を紹介しました
備忘録としての役目が強いですが、どなたかのお役に立てれば幸いです