Android Compose 应用进阶：Navigation 组件、共享元素与预测性返回的深度实践

Android Compose 应用进阶：Navigation 组件、共享元素与预测性返回的深度实践
Development of Shared element, Navigation, Predictive back component using Compose on Android
简述：

• 打开软件预测性返回选项后，使用Navigation组件组合页面间的跳转 即可实现页面的预测性返回
  
• 使用Navigation组件组合的页面，设置共享元素 即可实现共享元素间的预测性返回。
  

支持预测性返回手势

查看官方教程即可：
https://developer.android.com/guide/navigation/custom-back/predictive-back-gesture
Navigation导航 结合 Shared element共享元素

Navigation导航学习：

查看官方教程学习：
https://developer.android.com/develop/ui/compose/navigation?hl=zh-cn
导航主干-伪代码：

1. // 1. 定义导航路由
2. sealed class PhotoScreenRouteForColumn(val route: String) {
3.     object Grid : PhotoScreenRouteForColumn("photo_grid") // 网格视图
4.     // 详情路由需要两个参数
5.     object Detail : PhotoScreenRouteForColumn("photo_detail/{outerIndex}/{innerIndex}") {
6.         fun createRoute(outerIndex: Int, innerIndex: Int) = "photo_detail/$outerIndex/$innerIndex"
7.     }
8. }
9. // 2.主屏幕 Composable
10. @Composable
11. fun RespondCollectScreenSimplified(
12.     collectId: Long,
13.     appNavController: NavController,
14.     // ... (其他状态初始化和数据获取逻辑)
15. ) {
16.     // 创建内部导航控制器
17.     val photoNavController = rememberNavController()
18.     // 定义导航宿主
19.     NavHost(
20.         navController = photoNavController,
21.         startDestination = PhotoScreenRouteForColumn.Grid.route
22.     ) {
23.         // 路由 1: 网格视图
24.         composable(PhotoScreenRouteForColumn.Grid.route) {
25.             // 模拟点击照片后导航到详情
26.             val onPhotoClick = { outerIndex: Int, innerIndex: Int ->
27.                 photoNavController.navigate(
28.                     PhotoScreenRouteForColumn.Detail.createRoute(outerIndex, innerIndex)
29.                 )
30.             }
31.             // 假设这里会显示一个照片列表，点击后触发 onPhotoClick
32.             println("显示照片网格视图")
33.         }
35.         // 路由 2: 详情视图
36.         composable(
37.             route = PhotoScreenRouteForColumn.Detail.route,
38.             arguments = listOf(
39.                 navArgument("outerIndex") { type = NavType.IntType },
40.                 navArgument("innerIndex") { type = NavType.IntType }
41.             )
42.         ) { navBackStackEntry ->
43.            // 获取导航参数
44.             val outerIndexArg = navBackStackEntry.arguments?.getInt("outerIndex")
45.             val innerIndexArg = navBackStackEntry.arguments?.getInt("innerIndex")
47.             // 假设这里会根据 outerIndexArg 和 innerIndexArg 显示照片详情
48.             println("显示照片详情，outerIndex: $outerIndexArg, innerIndex: $innerIndexArg")
50.             // 返回操作
51.             val onBackClick = {
52.                 photoNavController.popBackStack()
53.             }
54.             // 假设有一个按钮点击后 调用 onBackClick，即可实现返回
55.         }
56.     }
57. }

复制代码

<strong>提示
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！