从顶部应用栏导航

本指南介绍了如何在顶级应用中制作导航图标 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),
        )
    }
}
AppBar.kt

代码要点

请注意此示例中的以下内容：

  • 可组合项 TopBarNavigationExample 定义了参数 navigateBack 类型为 () -> Unit。
  • 它会为以下对象的 navigationIcon 参数传递 navigateBack： CenterAlignedTopAppBar。

因此，每当用户返回顶部应用中的导航图标时， 调用 navigateBack()。

传递函数

此示例使用返回箭头作为图标。因此， navigateBack() 应将用户转到上一个目的地。

为此，请向 TopBarNavigationExample 传递一个调用 NavController.popBackStack()。为此，您需要构建自己的 导航图。例如：

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

其他资源

如需详细了解如何在应用中实现导航，请参阅 以下系列指南：