
导航是每个Android应用程序都具有的重要功能之一。我们从一个屏幕导航到另一个屏幕。它可以从活动到活动,也可以是片段到片段,或者其他任何内容。
我们知道如何在Android中实现导航。但是,今天,我们将学习如何在Jetpack Compose中执行导航。
设置
要在Jetpack Compose项目中使用导航,您需要做的就是在build.gradle
文件中添加以下依赖项:
implementation "androidx.navigation:navigation-compose:1.0.0-alpha02"
现在,我们准备在应用程序中使用导航。
基本上,Jetpack撰写导航包含两个主要部分:
- 导航控制器
- 导航主机
导航控制器
您可以将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()
}
}
}
现在,运行该应用程序,然后点击文本以导航到另一个屏幕。另外,尝试按“后退”按钮并验证是否正在维护后退堆栈。
0 条评论