#66 Jetpack ComposeでToDoアプリを作る - Navigation Compose

今回は画面遷移を担当してくれるNavigation Composableを導入します。

ライブラリの追加

Jetpack Compose用のNavigationライブラリをapp/build.graldeに追加します。本記事執筆時点での最新バージョンは2.4.0-beta02でした。

dependencies {
  ...
  implementation "androidx.navigation:navigation-compose:2.4.0-beta02"
}

NavHostの追加

次にToDoApp ComposableにNavHostを追加します。NavHostに画面遷移を担当してもらうにはNavHostControllerが必要なので rememberNavController()で取得しておきます。

@Composable
fun ToDoApp() {
  val navController = rememberNavController()
  
  ComposeToDoTheme {
    NavHost(navController = navController, startDestination = "main") {
      // ルート名mainが指定されたときに表示するもの
      composable("main") {
        // A surface container using the 'background' color from the theme
        Surface(color = MaterialTheme.colors.background) {
          Greeting("Android")
        }
      }
    }
  }
}

startDestinationでどのルートを最初に表示するか指定します。とりあえずmainにして、mainの時の中身は もともとToDoAppで表示していたものにしてみました。

公式ドキュメントの例ではNavHostをScaffoldのボディ部分で使っていましたが、今回はアプリのルートで使ってみます。

ここまで作業したものはこちらにあります。