Day 26 Compose UI Navigation

今年的疫情蛮严重的，希望大家都过得安好，今天疫情已经降级，
希望疫情快点过去，能回到一些线下技术聚会的时光～
今天目标：了解 Compose UI 上 Navigation 怎麽使用。

今天的完成图如下，程序码是完全参考 youtube 的影片的内容。

我觉得可以简单的将 Compose UI 上的 Navigation 看成几个部分，
NavHost → 宣告这个地方是用 Navigation 元件
composable → 宣告Navigation 里面要用到的画面元件
arguments → composable 画面之间传递资讯的参数

@Composable
fun Navigation() {
    val navController = rememberNavController()
    NavHost(
        navController = navController,
        startDestination = Screen.MainScreen.route
    ) {
        composable(route = Screen.MainScreen.route) {
            MainScreen(navController = navController)
        }
        composable(
            route = Screen.DetailScreen.route + "/{name}",
            arguments = listOf(
                navArgument("name") {
                    type = NavType.StringType
                    defaultValue = "Taiwan"
                    nullable = true
                }
            )) { entry -> DetailScreen(entry.arguments?.getString("name")) }
    }
}

@Composable
fun MainScreen(navController: NavController) {
    var text by remember {
        mutableStateOf("")
    }
    Column(
        verticalArrangement = Arrangement.Center,
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 50.dp)
    ) {
        TextField(value = text,
            onValueChange = {
                text = it
            }, modifier = Modifier.fillMaxWidth()
        )
        Spacer(modifier = Modifier.height(8.dp))
        Button(
            onClick = {
                navController.navigate(Screen.DetailScreen.withArgs(text))
            },
            modifier = Modifier.align(Alignment.End)
        ) {
            Text(text = "To DetailScreen")
        }
    }
}

@Composable
fun DetailScreen(name: String?) {
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier.fillMaxSize()
    ) {
        Text(text = "Hello, $name")
    }
}

都理解的话今天就结束了～
对了，参考资料的影片中还有教许多小技巧，
Lab里面则是有教如何从现有的 Navigation migration 到 Compose UI的 Navigation，值得一看。

然後，明天见罗！

参考资料：
https://developer.android.com/jetpack/compose/navigation
https://www.youtube.com/watch?v=4gUeyNkGE3g&ab_channel=PhilippLackner

本文同步发表在 Medium 上 文章连结