在 Jetpack Compose 中实现后退导航

Question

我有一个顶部栏，IconButton用于在单击时处理后退导航。

作为回调传递的函数的实现如下：

private fun navigateBack(navController: NavController) {
    val route = navController.previousBackStackEntry?.destination?.route ?: ""
    navController.navigate(route)
}

不幸的是，它的工作方式与图片中显示的默认 Android 底部导航不同

有没有办法实现与底部系统导航相同的后退导航？

Answer 1

您可以将您的传递NavController给您并在导航图标中TopAppBar使用。navController.navigateUp()

如果您只想在某些可组合项中显示此图标，您可以使用参数（如canPop以下示例所示），并在要处理后退按钮的可组合项中将其设置为 true。

if (canPop) {
    TopAppBar(
        title = { Text(text = title) },
        navigationIcon = {
            IconButton(onClick = {
                navController.navigateUp()
            }) {
                Icon(Icons.Rounded.ArrowBack, "")
            }
        },
        backgroundColor = MaterialTheme.colors.TopBarColor)
} else {
    TopAppBar(
        title = { Text(text = title) },
        backgroundColor = MaterialTheme.colors.TopBarColor
    )
}

另请检查popBackStack 文档

尝试弹出控制器的返回堆栈。类似于当关联的导航主机具有焦点时用户按下系统后退按钮。