Skip to content

在移动应用开发中,优秀的导航体验是确保用户轻松浏览和操作应用的关键因素之一。随着 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_homedestination_details/{itemId}。在 composable 中,我们可以渲染每个导航节点对应的 UI 内容。

导航到其他目标

要在 Composable 函数中触发导航,只需使用 NavControllernavigate 方法:

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