从顶部应用栏导航

本指南演示了如何在顶部应用栏中使导航图标执行导航操作。

示例

以下代码片段是实现具有功能性导航图标的顶部应用栏的最小示例。在这种情况下，该图标将用户带到他们在应用中的上一个目的地

@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。
它将 navigateBack 传递给 CenterAlignedTopAppBar 的 navigationIcon 参数。

因此，每当用户点击顶部应用栏中的导航图标时，它都会调用 navigateBack()。

传递函数

此示例使用后退箭头作为图标。因此，navigateBack() 的参数应将用户带到上一个目的地。

为此，请将对 NavController.popBackStack() 的调用传递给 TopBarNavigationExample。您可以在构建导航图时执行此操作，例如

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

其他资源

有关如何在应用中实现导航的更多信息，请参阅以下指南系列