KotlinのJetpack Composeを使用し、ナビゲーションを行った際に、ログイン or サインイン画面があり、その後、ログイン or サインインを行った時に画面遷移し、前の画面には戻れないようにするやり方。
コード
Scaffold(
topBar = {
// ページ上部のタイトルや戻るボタンが表示される部分の指定
AppBar(
currentScreen = backStackEntry,
canNavigateBack = navController.previousBackStackEntry != null,
navigateUp = { navController.navigateUp() }
)
}
) {
// startDestination = 最初に表示されるnavigationのrouteを指定
NavHost(
navController = navController,
startDestination = "login",
modifier = modifier.padding(it)
) {
// ナビゲーションのグループ分け
// startDestination = 最初に表示されるページ
navigation(
startDestination = "page1",
route = "login"
) {
composable("page1") {
// ボタンタップ時の処理 ページ2を表示
Page1() {
navController.navigate("page2")
}
}
composable("page2") {
Page2() {
// ボタンタップ時の処理 ページAを表示
navController.navigate("index") {
// 下記の指定を行う事で、前のナビゲーションに戻れなくなる
popUpTo("login") {
inclusive = true
}
}
}
}
}
navigation(
startDestination = "pageA",
route = "index"
) {
composable("pageA") {
PageA() {
}
}
}
}
}
参考にしたページ
Android Compose ネスト ナビゲーション
https://developer.android.com/jetpack/compose/navigation?hl=ja#nested-nav
まとめ
やろうとしていた事は・・・
ログインやサインイン画面があり、ログインやサインインを行った後に、別の画面に遷移し、その後ログインやサインイン画面には戻れないようにする。
これを実現するためには、上記コードで達成できそうでした。
NavHost内でnavigationを使い、デスティネーション(画面?ページ?)をグループ化する事で、簡単にページ切り替えを実現する事が出来ました。
NavHostなど、Composeを使ったページ遷移についての基本的なやり方は
Android Compose コンポーザブルに移動する
https://developer.android.com/jetpack/compose/navigation?hl=ja#nav-to-composable
上記サイトや、
Android トレーニング Jetpack Compose でのナビゲーション
https://developer.android.com/courses/pathways/android-basics-compose-unit-4-pathway-2?hl=ja
この2つがわかりやすく、理解するのに役立つと思います。
Google公式のAndroidデベロッパー向けサイトは、情報量が多いですね。
すごく参考になりました。
そして、見やすい。\(^o^)/
コメント