このガイドでは、ナビゲーション アイコンをトップアプリで作成する方法を示します バー でナビゲーション操作を行います。
例
次のスニペットは、上位のアプリを実装する方法の簡単な例です ナビゲーション アイコンが機能しているバー。この場合、アイコンはユーザーを アプリでの以前のデスティネーション:
@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), ) } }
コードに関する主なポイント
この例では、次の点に注意してください。
- コンポーザブル
TopBarNavigationExample
はパラメータnavigateBack
を定義します。() -> Unit
型。 - これは、次の
navigationIcon
パラメータにnavigateBack
を渡します。CenterAlignedTopAppBar
。
そのため、ユーザーがトップアプリの [戻る] ナビゲーション アイコンをクリックすると、
navigateBack()
を呼び出す。
関数を渡す
この例では、アイコンに「戻る」矢印を使用しています。そのため、
navigateBack()
は、ユーザーを前のデスティネーションに誘導する必要があります。
そのためには、TopBarNavigationExample
に呼び出しを
NavController.popBackStack()
。これは、インフラストラクチャを
グラフを使用します。例:
NavHost(navController, startDestination = "home") {
composable("topBarNavigationExample") {
TopBarNavigationExample{ navController.popBackStack() }
}
// Other destinations...
参考情報
アプリにナビゲーションを実装する方法について詳しくは、 次の一連のガイドをご覧ください。