前言
导航是每个 Android 应用程序都具有的重要功能之一。我们从一个屏幕导航到另一个屏幕。它可以是从一个活动到另一个活动，或者从一个片段到另一个片段或其他任何东西。您几乎找不到任何不涉及导航的应用程序。
我们知道如何在 Android 中实现导航。但是，今天，我们将学习如何在 Jetpack Compose 中执行导航。
在本章中，我们将学习如何使用 Jetpack Navigation 在不同的可组合组件之间导航。那么，让我们开始设置吧。
设置
要在 Jetpack Compose 项目中使用导航，您只需在build.gradle文件中添加以下依赖项：
implementation "androidx.navigation:navigation-compose:1.0.0-alpha02"
现在，我们已经准备好在我们的应用程序中使用导航了。
基本上，Jetpack Compose Navigation 有两个主要部分：
1.导航控制器
2.导航主机
导航控制器
您可以将 NavController 视为导航组件的中心 API。因此，要导航到任何目的地，我们需要使用 NavController。
要创建 NavController，可以使用该rememberNavController()方法。因此，NavController 是有状态的，它将拥有有关后堆栈的所有信息。因此，您无需单独处理。以下是 NavController 的示例：
val navController = rememberNavController()
一个 NavController 应该只与一个 NavHost 相关联。但是这个 NavHost 是什么？让我们了解一下。
导航主机
您可以将 NavHost 视为可以绘制屏幕的区域，并且在 NavController 的帮助下，您可以在 NavHost 中存在的各种屏幕之间导航。
NavHost 中的每个屏幕都有一些与之关联的路由，并且在此路由的帮助下，执行屏幕之间的导航。以下是 NavHost 的示例：
val navController = rememberNavController()
NavHost(
navController = navController,
startDestination = "first_screen"
) {
composable("first_screen") {
// first screen
}
composable("second_screen") {
// second screen
}
}
正如您在上面的代码中看到的，NavHost 采用两个参数navController，即startDestination. startDestination是导航的开始屏幕。您可以将其视为 Navigation 的入口点。在 NavHost 中，您可以根据需要声明任意数量的可组合。
现在，让我们在一个项目中实现导航。
注意：要使用 Jetpack Compose，您需要拥有最新的 Canary 版本的 Android Studio 4.2。
导航项目
打开 Android Studio 并创建一个 Empty Compose Activity。
创建项目后，需要在build.gradle文件中添加 Navigation 的依赖：
implementation "androidx.navigation:navigation-compose:1.0.0-alpha02"
添加依赖项后，同步您的项目。
注意：要使用 Navigation，您需要谨慎使用 Jetpack Compose 版本和 Navigation 版本。就我而言，Jetpack Compose 版本是“1.0.0-alpha07”，Navigation 版本是“1.0.0-alpha02”。
为简单起见，我们将添加三个屏幕，即屏幕一、屏幕二和屏幕三。每个屏幕上都有一个文本，单击文本时，您将从一个屏幕导航到另一个屏幕。
我们知道，为了使用 Navigation，我们需要NavHost在 NavHost 内部创建所有屏幕。同时我们也知道NavHost需要NavController。
因此，让我们创建一个名为 ComposeNavigation 的可组合函数：
@Composable
fun ComposeNavigation() {
val navController = rememberNavController()
NavHost(
navController = navController,
startDestination = "first_screen"
) {
composable("first_screen") {
FirstScreen(navController = navController)
}
composable("second_screen") {
SecondScreen(navController = navController)
}
composable("third_screen") {
ThirdScreen(navController = navController)
}
}
}
在上面的代码中，我们使用 NavHost 制作屏幕，我们的第一个屏幕是“first_screen”，因为我们将 startDestination 设置为“first_screen”。这里，“ first_screen ”、“ second_screen ”和“ third_screen ”是每个屏幕的路由。每个目的地都应该有一条独特的路线，因为在这些路线的帮助下，一个屏幕与其他屏幕区分开来。
现在，让我们制作每个屏幕的 UI。以下是第一屏的代码：
@Composable
fun FirstScreen(navController: NavController) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "First Screen\n" +
"Click me to go to Second Screen",
color = Color.Green,
style = TextStyle(textAlign = TextAlign.Center),
modifier = Modifier.padding(24.dp).clickable(onClick = {
// this will navigate to second screen
navController.navigate("second_screen")
})
)
}
}
在上面的代码中，您可以看到点击文本时，我们正在使用 navController 使用该方法导航到“ second_screen ” navigate。
注意：您需要显式导入 navigate("some_string") 方法（如果您的 IDE 无法做到这一点）。
import androidx.navigation.compose.navigate
同样，您可以制作其他屏幕的 UI，如下所示：
@Composable
fun SecondScreen(navController: NavController) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "Second Screen\n" +
"Click me to go to Third Screen",
color = Color.Yellow,
style = TextStyle(textAlign = TextAlign.Center),
modifier = Modifier.clickable(onClick = {
// this will navigate to third screen
navController.navigate("third_screen")
})
)
}
}
@Composable
fun ThirdScreen(navController: NavController) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "Third Screen\n" +
"Click me to go to First Screen",
color = Color.Red,
style = TextStyle(textAlign = TextAlign.Center),
modifier = Modifier.clickable(onClick = {
// this will navigate to first screen
navController.navigate("first_screen")
})
)
}
}
最后，您需要ComposeNavigation从以下方式调用该方法setContent：
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposeNavigationTheme {
ComposeNavigation()
}
}
}
现在，运行应用程序并点击文本以导航到不同的屏幕。另外，尝试按下后退按钮并验证是否正在维护后退堆栈。
作者：Sumit Mishra
链接：https://blog.mindorks.com/jetpack-compose-navigation
