Navigation Composeでグラフを入れ子にする
最終更新日:2022-05-09
    
    公式ドキュメントはこちら
NavHost
 の中で composable()
 の代わりに navigation()
 を使うと、グラフを入れ子にすることができます。
NavHost(navController, startDestination = "top") {
  navigation(route = "login", startDestination = "login/login") {
    composable("login/login") { ... }
    composable("login/reset_password") { ... }
  }
  navigation(route = "main", startDestination = "main/home") {
    composable("main/home") { ... }
  }
}
route
 パラメータと startDestination
 を同じ値にするとエラーとなり、実行時にクラッシュします。また、入れ子の中で追加する composable()
 のルートは全体で一意となる必要があります。重複した場合、どの設定が使われるかの保証はありません(多分。。。)
拡張関数で定義する
NavGraphBuilder
 に対し、拡張関数で定義する方法が公式ドキュメントで紹介されています。
// 引数は必要に応じて設定
fun NavGraphBuilder.userInfoGraph(navController: NavController, route: String) {
  navigation(route = route, startDestination = "${route}/top") {
    composable("${route}/top") { ... }
  }
}
定義した拡張関数を、 NavHost
 の中や他の navigation()
 の中で使います。
NavHost(navController, startDestination = "top") {
  userInfoGraph(navController, "user")
  ...
}
    
