如何让 Jetpack Compose 导航栈和导航栏图标保持一致？

Android

2024-03-26 22:59:48

同步 Jetpack Compose 导航栈和导航栏图标选中状态

问题

在 Jetpack Compose 中使用 Navigation Compose 进行导航时，如何确保导航栈和导航栏图标的选中状态保持同步？

解决方案

实现导航栏和导航栈同步的关键步骤如下：

定义数据类： 创建数据类来表示导航栏目的地，包括标题、图标和路由。
存储目的地和当前选择： 使用 remember 函数存储目的地列表和当前选中的目的地。
创建导航控制器： 使用 rememberNavController 函数创建导航控制器。
构建导航栏： 使用 NavigationBar 组件构建导航栏，NavigationBarItem 用于表示每个目的地，并处理点击事件。
处理返回按钮按下事件： 在 onBackPressedDispatcher 中处理返回按钮按下事件，更新导航栏图标的选中状态。

深入理解

数据类 定义了导航栏中目的地的详细信息。

存储目的地和当前选择 使应用程序能够跟踪当前选定的目的地。

导航控制器 处理导航操作，例如导航到新目的地和返回。

导航栏 显示导航栏图标，并响应点击事件。

处理返回按钮按下事件 确保导航栈和导航栏图标的选中状态在返回时保持同步。

代码示例

// 定义数据类
data class Destination(val title: String, val icon: ImageVector, val route: String)

// 存储目的地和当前选择
val listOfDestinations = remember { listOf(...) }
var currentSelection by remember { mutableStateOf(...) }

// 创建导航控制器
val navController = rememberNavController()

// 构建导航栏
NavigationBar {
    listOfDestinations.forEach { destination ->
        NavigationBarItem(
            selected = currentSelection == destination,
            onClick = { ... },
            icon = { ... },
            label = { ... }
        )
    }
}

// 处理返回按钮按下事件
override fun onBackPressed() {
    // ...
    currentSelection = listOfDestinations.find(...) ?: listOfDestinations[0]
}