モケラ

Tech Sheets

mokelab

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")
  ...
}

一覧に戻る