Kotlin Composeを使用したナビゲーションで、ログイン画面から遷移し、戻れないようにする(ルートを入れ替えたような構成)

Kotlin Kotlin
Kotlin

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^)/

コメント

タイトルとURLをコピーしました