Compose (13/N) - 使用Navigation
一、概念
| public fun NavHost( navController: NavHostController, //控制器 startDestination: String, //默认显示的界面（起始页） modifier: Modifier = Modifier, route: String? = null, builder: NavGraphBuilder.() -> Unit //构建导航图 ) |
|
public fun NavGraphBuilder.composable( arguments: List<NamedNavArgument> = emptyList(), |
|
val navController = rememberNavController() //获取控制器。 navController.navigate() //页面跳转 navController.popBackStack() //返回上一级，相当于点击返回键 |
二、简单跳转
//用单例便于管理路线名称
object RouteConfig {const val PAGE_ONE = "1"const val PAGE_TWO = "2"const val PAGE_THREE = "3"
}
//定义三个页面
@Composable
fun PageOne() {Box(modifier = Modifier.background(Color.Blue).fillMaxSize().wrapContentSize(align = Alignment.Center)) {Text(text = "Page One", fontSize = 100.sp, color = Color.White)}
}
@Composable
fun PageTwo() {Box(modifier = Modifier.background(Color.Green).fillMaxSize().wrapContentSize(align = Alignment.Center)) {Text(text = "Page Two", fontSize = 100.sp, color = Color.White)}
}
@Composable
fun PageThree() {Box(modifier = Modifier.background(Color.Red).fillMaxSize().wrapContentSize(align = Alignment.Center)) {Text(text = "Page Three", fontSize = 100.sp, color = Color.White)}
}//根节点
@Composable
fun Screen(modifier: Modifier = Modifier
) {val navController = rememberNavController()Column(modifier = modifier.fillMaxSize(), verticalArrangement = Arrangement.Top) {SwitchButton(modifier = modifier, navController = navController)SwitchRegion(modifier = modifier, navController = navController)}
}
//三个按钮点击切换
@Composable
fun SwitchButton(modifier: Modifier = Modifier, navController: NavHostController
) {Row(modifier = modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceAround) {Button(onClick = { navController.navigate(RouteConfig.PAGE_ONE) }) {Text(text = "Page One")}Button(onClick = { navController.navigate(RouteConfig.PAGE_TWO) }) {Text(text = "Page Two")}Button(onClick = { navController.navigate(RouteConfig.PAGE_THREE) }) {Text(text = "Page Three")}}
}
//切换区域
@Composable
fun SwitchRegion(modifier: Modifier = Modifier, navController: NavHostController
) {NavHost(navController = navController,startDestination = RouteConfig.PAGE_ONE,) {composable(route = RouteConfig.PAGE_ONE) {PageOne()}composable(route = RouteConfig.PAGE_TWO) {PageTwo()}composable(route = RouteConfig.PAGE_THREE) {PageThree()}}
}