【Android】Jetpack Compose：导航

前言

导航是每个 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

【Android】Jetpack Compose：导航