Banner Jetpack撰写导航

导航是每个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使用两个参数,即navControllerstartDestinationstartDestination是导航的开始屏幕。您可以将其视为导航的入口点。在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")
            })
        )
    }
}

最后,您需要ComposeNavigationsetContent下面的方法中调用该方法:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        ComposeNavigationTheme {
            ComposeNavigation()
        }
    }
}

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

0
分类: 未分类

bayshier

愿世间每个美好的灵魂都能被温柔以待

0 条评论

发表评论

邮箱地址不会被公开。 必填项已用*标注