如何处理 Jetpack Compose 中的导航？

Posted 2023-02-19

【中文标题】如何处理 Jetpack Compose 中的导航？

【英文标题】：How to handle navigation in Jetpack Compose?

【发布时间】：2020-04-24 12:30:47

【问题描述】：

在 Jetpack Compose 中，导航应该如何完成？所有（并且没有很多）示例（包括来自 Google 的官方示例）都使用密封类并加载新屏幕以响应观察当前屏幕的变化。这确实（有点）工作，但不提供导航后台堆栈，并且手机的后退按钮完全不知道，只是关闭应用程序而不是返回上一个屏幕。这是否应该以某种方式与 androidX 的导航组件融合——但它是基于 XML 的，而 Compose 就是要远离 XML？还是有一个全新的导航概念即将到来，可能类似于 SwiftUI（navigationlink 等）？这似乎是最大的障碍之一 - 因为没有导航，您只能拥有一个玩具应用程序。有人知道这里的路线图吗？

【问题讨论】：

“这是否应该以某种方式与 AndroidX 的导航组件融合”——是的。 “Compose 就是要远离 XML”——不，Compose 就是要远离 View 层次结构。这具有消除传统布局资源的副作用。这并没有消除绝大多数资源。 “有人知道这里的路线图吗？” -- 这一切都在进行中。

谢谢。了解其正在进行的工作，但我认为了解路线图具有非常实际的意义 - 例如，如果 Compose 起飞后将被其他东西取代，是否值得投资学习一种新的做事方式（AndroidX 导航） .他们已经在 Compose 上工作了一段时间，而且像导航这样大的东西肯定至少有一些架构路线图，并且没有互联网搜索显示任何关于该路线图的信息

我所看到的一切都表明他们的意图是利用导航组件。我几乎可以保证其他开发人员将创建其他“路由器”选项，利用 React/Redux 类型的技术。因此，我希望在 Jetpack Compose 准备好投入生产使用时，您将有一系列选项可供选择。

【参考方案1】：

这是 Jetpack Compose 中一种非官方的导航方法。试试看，直到您从 Google android 开发人员那里得到官方消息。

组合路由器

https://github.com/zsoltk/compose-router

【参考方案2】：

使用androidx.navigation:navigation-compose。请参阅@pRaNaY 的回答。

原答案

似乎他们正在远离 XML。

在 1.0.0-alpha 发布后发布的新的官方示例，有一个共享代码来管理回栈和导航。此代码还不是库的一部分。

https://github.com/android/compose-samples/blob/master/Owl/app/src/main/java/com/example/owl/ui/utils/Navigation.kt https://github.com/android/compose-samples/blob/master/Jetsnack/app/src/main/java/com/example/jetsnack/ui/utils/Navigation.kt

更新

由于示例项目已迁移到androidx.navigation:navigation-compose，因此链接已失效。 我试图找到最新的提交，哪些链接没有死。

https://github.com/android/compose-samples/blob/17b362f0315cf786d3d77d6964ee39b50e311199/Owl/app/src/main/java/com/example/owl/ui/utils/Navigation.kt

https://github.com/android/compose-samples/blob/17b362f0315cf786d3d77d6964ee39b50e311199/Jetsnack/app/src/main/java/com/example/jetsnack/ui/utils/Navigation.kt

【讨论】：

404 未找到...

@Morozov 更新了答案。

【参考方案3】：

我已经写了如何使用 Jetpack Compose 处理导航

链接：https://medium.com/@gsaillen95/how-to-handle-navigation-in-jetpack-compose-a9ac47f7f975

【参考方案4】：

已发布用于 Compose 导航的新 Jetpack 库。它仍处于 alpha 阶段。

在这个新库中，现在用户可以使用导航组件功能在不同的可组合组件之间导航。

使用 navigation-compose：

dependencies 
    def nav_compose_version = "1.0.0-alpha01"
    implementation "androidx.navigation:navigation-compose:$nav_compose_version"

示例：

第 1 步：在您的可组合文件中使用 rememberNavController() 方法创建一个 NavController：Link：

val navController = rememberNavController()

第 2 步：创建NavHost 需要之前通过rememberNavController() 创建的NavController 以及图表起始目的地的路线：Link。

NavHost(navController, startDestination = "profile") 
    composable("profile")  Profile(...) 
    composable("friendslist")  FriendsList(...) 
    ...

第 3 步：导航到可组合使用 navigate()：

fun Profile(navController: NavController) 
    ...
    Button(onClick =  navController.navigate("friends") ) 
        Text(text = "Navigate next")
    
    ...

查看更多https://developer.android.com/jetpack/compose/navigation

【讨论】：

navController.navigate("friends") 似乎不起作用。它返回编译错误。 None of the following functions can be called with the arguments supplied. navigate(Uri) defined in androidx.navigation.NavController navigate(NavDeepLinkRequest) defined in androidx.navigation.NavController navigate(NavDirections) defined in androidx.navigation.NavController navigate(Int) defined in androidx.navigation.NavController

@Thracian 我不知道为什么，但是 AS 在这里找不到文档中使用的新 'navigate' 扩展，所以我不得不像这样手动导入它：import androidx.navigation.compose.navigate跨度>