Compose (13/N) - 使用Navigation

一、概念

public fun NavHost(     navController: NavHostController,        //控制器     startDestination: String,        //默认显示的界面（起始页）     modifier: Modifier = Modifier,     route: String? = null,     builder: NavGraphBuilder.() -> Unit        //构建导航图 )

public fun NavGraphBuilder.composable(     route: String,        //路线名称（到哪去）     arguments: List = emptyList(),     deepLinks: List = emptyList(),     content: @Composable (NavBackStackEntry) -> Unit )

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

三、携带参数跳转

四、深层链接