如何处理 Jetpack Compose 中的导航？

Question

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

Answer 1

这是 Jetpack Compose 中的一种非官方导航方法。尝试一下，直到你得到 Google android 开发者的官方消息。

compose-router

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

Answer 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

Answer 3

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

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

Answer 4

为 Compose 导航发布了新的 Jetpack 库。它仍处于测试阶段。

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

使用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

Answer 5

这是另一个很好的 Compose Navigation 替代库：

https://github.com/olshevski/compose-navigation-reimagined

我创建它是因为官方导航组件的某些部分太奇怪了。

如何处理 Jetpack Compose 中的导航？

How to handle navigation in Jetpack Compose?

android

kotlin

android-jetpack

android-jetpack-compose

原答案

更新