本指南介绍了如何在顶级应用中制作导航图标 bar 来执行导航操作。
示例
以下代码段是一个极简示例,展示了如何实现热门应用 带有功能导航图标的导航栏。在这种情况下,用户点按该图标 用户之前在应用中选择的目的地:
@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...
其他资源
如需详细了解如何在应用中实现导航,请参阅 以下系列指南: