Hello Yu

切换日光/暗黑模式

在移动应用开发中，优秀的导航体验是确保用户轻松浏览和操作应用的关键因素之一。随着 Android Jetpack Compose 技术的引入，构建出色的用户界面变得更加便捷。而在这一体验中，Jetpack Compose Navigation 扮演了重要角色，使应用导航变得更加简单和流畅。

Jetpack Compose Navigation 是什么？ ​

Jetpack Compose Navigation 是 Jetpack Compose 库中的一部分，专为简化应用导航而设计。传统上，Android 应用使用 XML 导航图来管理不同屏幕间的切换，但 Compose Navigation 采用了更现代化的方法。通过使用 Kotlin 代码来定义导航图和目标，它使导航逻辑更加清晰和易于维护。

开始使用 Compose Navigation ​

添加依赖项 ​

首先，我们需要在项目的 build.gradle 文件中添加 Compose Navigation 的依赖项：

dependencies {
    def nav_version = "2.7.1"

    implementation "androidx.navigation:navigation-compose:$nav_version"
}
dependencies {
    def nav_version = "2.7.1"

    implementation "androidx.navigation:navigation-compose:$nav_version"
}

定义导航关系 ​

在 Compose Navigation 中，导航关系由 Composable 函数表示。在 NavHost 中定义这些关系，如下所示：

kotlin
NavHost(navController = navController, startDestination = "destination_home") {
    composable("destination_home") { HomeScreen() }
    composable("destination_details/{itemId}") { backStackEntry ->
        val itemId = backStackEntry.arguments?.getString("itemId")
        DetailsScreen(itemId)
    }
}
NavHost(navController = navController, startDestination = "destination_home") {
    composable("destination_home") { HomeScreen() }
    composable("destination_details/{itemId}") { backStackEntry ->
        val itemId = backStackEntry.arguments?.getString("itemId")
        DetailsScreen(itemId)
    }
}

这段代码创建了两个导航关系，分别是 destination_home 和 destination_details/{itemId}。在 composable 中，我们可以渲染每个导航节点对应的 UI 内容。

导航到其他目标 ​

要在 Composable 函数中触发导航，只需使用 NavController 的 navigate 方法：

kotlin
Button(onClick = { navController.navigate("destination_details/123") }) {
    Text(text = "Go to Details")
}
Button(onClick = { navController.navigate("destination_details/123") }) {
    Text(text = "Go to Details")
}

在这个例子中，点击按钮将触发导航到目标 destination_details/123。

参数传递和接收 ​

Compose Navigation 支持类型安全的参数传递和接收。使用 navigate 方法传递参数，然后在目标的 composable 中通过 backStackEntry.arguments 来接收参数。

kotlin
    composable("destination_details/{itemId}") { backStackEntry ->
        val itemId = backStackEntry.arguments?.getString("itemId")
        DetailsScreen(itemId)
    }
    composable("destination_details/{itemId}") { backStackEntry ->
        val itemId = backStackEntry.arguments?.getString("itemId")
        DetailsScreen(itemId)
    }

导航返回和 Back Stack 管理 ​

Compose Navigation 提供了内置的导航返回支持。使用 navController.popBackStack 方法可以返回到上一个目标。此外，Compose Navigation 会自动管理 Back Stack，确保导航状态的正确性。

参考资料：

《Navigating with Compose》

https://developer.android.com/reference/kotlin/androidx/navigation/package-summary