Jetpack Compose: Navigation

导航是每个Android应用程序都具有的重要功能之一。我们从一个屏幕导航到另一个屏幕。它可以从活动到活动，也可以是片段到片段，或者其他任何内容。

我们知道如何在Android中实现导航。但是，今天，我们将学习如何在Jetpack Compose中执行导航。

设置

要在Jetpack Compose项目中使用导航，您需要做的就是在build.gradle文件中添加以下依赖项：

implementation "androidx.navigation:navigation-compose:1.0.0-alpha02"

现在，我们准备在应用程序中使用导航。

基本上，Jetpack撰写导航包含两个主要部分：

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是导航的开始屏幕。您可以将其视为导航的入口点。在NavHost内部，您可以根据需要声明任意数量的可组合对象。

现在，让我们在项目中实现导航。

注意：要使用Jetpack Compose，您需要拥有最新的Canary版本的Android Studio 4.2。因此，您可以移至

Android Studio预览页面并下载最新的Canary版本。

导航项目

打开Android Studio并创建一个空的撰写活动。

创建项目后，您需要在build.gradle文件中添加Navigation的依赖项：

implementation "androidx.navigation:navigation-compose:1.0.0-alpha02"

添加依赖项后，同步您的项目。

注：要使用导航，您需要仔细使用Jetpack Compose版本和导航版本。就我而言，Jetpack Compose版本是“ 1.0.0-alpha07”，导航版本是“ 1.0.0-alpha02”。

为了简单起见，我们将添加三个屏幕，即屏幕一，屏幕二和屏幕三。每个屏幕上都有一个文本，单击文本，您将从一个屏幕导航到另一个屏幕。

我们知道，要使用导航功能，我们需要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通过该navigate方法导航到“ second_screen ” 。

注意：您需要显式导入navigation（“ some_string”）方法（如果您的IDE无法做到这一点）。

import androidx.navigation.compose.navigate

同样，您可以制作其他屏幕的用户界面，如下所示：

@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()
        }
    }
}

现在，运行该应用程序，然后点击文本以导航到另一个屏幕。另外，尝试按“后退”按钮并验证是否正在维护后退堆栈。