Jetpack Compose之 在Compose中使用Navigation导航

val navController = rememberNavController()

为了便于管理路由地址，我们新建RouteConfig配置文件，代码如下所示：

object RouteConfig {

/**

* 页面1路由

*/

const val ROUTE_PAGEONE = “pageOne”

/**

* 页面1路由

*/

const val ROUTE_PAGETWO = “pageTwo”

}

在这里，将页面1路由设置为起始导航，并使用composable方法添加导航对应关系，修改后的NavHostDemo代码如下所示：

@Composable

fun NavHostDemo() {

val navController = rememberNavController()

NavHost(navController = navController, startDestination = RouteConfig.ROUTE_PAGEONE) {

composable(RouteConfig.ROUTE_PAGEONE) {

OnePage()

}

composable(RouteConfig.ROUTE_PAGETWO) {

PageTwo()

}

}

}

如此一来，我们就建立了导航对应关系，RouteConfig.ROUTE_PAGEONE对应OnePage，RouteConfig.ROUTE_PAGETWO对应PageTwo，由于我们需要在各自的页面中进行页面跳转，所以将navController传递到对应的页面中去，代码如下所示：

composable(RouteConfig.ROUTE_PAGEONE) {

PageOne(navController)

}

composable(RouteConfig.ROUTE_PAGETWO) {

PageTwo(navController)

}

这样我们就可以在页面1中进行页面跳转了。

普通页面跳转

---

修改页面1的代码如下所示：

@Composable

fun PageOne(navController: NavController) {

Column(

modifier = Modifier

.fillMaxWidth()

.fillMaxHeight()

.background(

Color.White

)

) {

Text(text = “这是页面1”)

Spacer(modifier = Modifier.height(20.dp))

Button(onClick = {

//点击跳转到页面2

navController.navigate(RouteConfig.ROUTE_PAGETWO)

}) {

Text(

text = “跳转页面2”,

modifier = Modifier.fillMaxWidth(),

textAlign = TextAlign.Center

)

}

}

}

我们在按钮的监听事件中调用navController.navigate方法，传入页面2的路由地址，这样就可以跳转到页面2了。在页面2中调用popBackStack方法将当前页面出栈便又回到了页面1，这里就不贴页面2的代码了。当然我们要记得最后一步：在入口处调用 NavHostDemo()

setC