このページは Cloud Translation API によって翻訳されました。

トップアプリバーから移動する

このガイドでは、トップアプリバーのナビゲーションアイコンからナビゲーションアクションを実行する方法について説明します。

例

次のスニペットは、ナビゲーションアイコンが機能するトップアプリバーを実装する簡単な例です。この場合、アイコンはユーザーをアプリ内の以前のデスティネーションに誘導します。

@Composable
fun TopBarNavigationExample(
    navigateBack: () -> Unit,
) {
    Scaffold(
        topBar = {
            CenterAlignedTopAppBar(
                title = {
                    Text(
                        "Navigation example",
                    )
                },
                navigationIcon = {
                    IconButton(onClick = navigateBack) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
            )
        },
    ) { innerPadding ->
        Text(
            "Click the back button to pop from the back stack.",
            modifier = Modifier.padding(innerPadding),
        )
    }
}AppBar.kt

コードに関する要点

この例では、次の点に注意してください。

コンポーザブル TopBarNavigationExample は、() -> Unit 型のパラメータ navigateBack を定義します。
CenterAlignedTopAppBar の navigationIcon パラメータに navigateBack を渡します。

そのため、ユーザーがトップアプリのナビゲーションアイコンをクリックするたびに navigateBack() が呼び出されます。

関数を渡す

この例では、アイコンに「戻る」矢印を使用しています。そのため、navigateBack() の引数は、ユーザーを前のデスティネーションに誘導する必要があります。

そのためには、TopBarNavigationExample に NavController.popBackStack() の呼び出しを渡します。これは、ナビゲーショングラフを作成する際に行います。次に例を示します。

NavHost(navController, startDestination = "home") {
    composable("topBarNavigationExample") {
        TopBarNavigationExample{ navController.popBackStack() }
    }
    // Other destinations...

参考情報

アプリにナビゲーションを実装する方法について詳しくは、次の一連のガイドをご覧ください。