从顶部应用栏导航

本指南将演示如何让顶部应用栏中的导航图标执行导航操作。

示例

以下代码段是一个最简示例，展示了如何实现带有功能性导航图标的顶部应用栏。在本示例中，导航图标会将用户带到应用中的上一个目标界面：

@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...

其他资源

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