2024年已经过半了，我作为聋人独立开发者，我经常会时不时反思：自己这半年到底进步了多少？在这篇文章里，我分享一个用 Jetpack Compose、Material3和 Kotlin 语言实现跳转导航多屏的案例。无论你有没有开发经验，相信这篇文章对你会非常有所帮助。
一、项目背景
在日常工作中经常面临复杂 UI 的构建挑战，以前的开发方式依赖繁琐的XML布局和Activity、Fragment之间的频繁切换，代码大量重复且难以维护。Jetpack Compose 的出现让我们看到了新的可能性：声明式UI让UI和业务逻辑的绑定很简洁，让页面导航更顺畅。
二、项目开发
2.1 Compose UI的设计
第一个屏幕（FirstScreen）包含一个 OutlinedTextField 和一个 Button， TextField 用于用户输入，Button 用于触发导航。我们通过 remember 和 mutableStateOf 来存储用户的输入状态，并使用 Button 的 onClick 事件将输入内容传递给下一个屏幕。
第二个屏幕（SecondScreen）通过 Jetpack Navigation 从第一个屏幕接收输入参数，在界面中展示出来。整个界面布局采用了 Column 组件，元素垂直排列，利用 Spacer 调整组件间的间距。
2.2 FirstScreen的代码实现
代码语言：java复制@Composable
fun FirstScreen(navigationToSecondScreen:(String)->Unit){
val name = remember {
mutableStateOf("")
}
Column(
modifier = Modifier
.fillMaxSize()
.padding(16.dp),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
){
Text("Nim开发者", fontSize = 24.sp)
Text("这是第一个页面", fontSize = 24.sp)
Spacer(modifier = Modifier.height(16.dp))
OutlinedTextField(value = name.value, onValueChange = {
name.value = it
})
Button(onClick = {
navigationToSecondScreen(name.value)
}) {
Text("点击跳转第二个页面")
}
}
}
@Preview(showBackground = true)
@Composable
fun FirstPreview() {
FirstScreen({})
}2.3 效果图
2.4 SecondScreen的代码实现
代码语言：java复制@Composable
fun SecondScreen(name: String, navigateToFirstScreen:(String)->Unit){
Column(
modifier = Modifier
.fillMaxSize()
.padding(16.dp),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
){
Text("欢迎 $name", fontSize = 24.sp)
Text("这是第二个页面", fontSize = 24.sp)
Button(onClick = {
navigateToFirstScreen(name)
}) {
Text("点击跳转第一个页面")
}
}
}
@Preview(showBackground = true)
@Composable
fun SecondPreview() {
SecondScreen("Nimyears", {})
}2.5 效果图
2.6 导航实现
要实现页面之间的跳转，我们使用 Jetpack Navigation 组件。在 NavHost 中定义两个页面路由：first_screen 和 second_screen。通过 NavController，我们可以轻松管理页面之间的切换。当用户在第一个页面点击按钮时，触发 navController.navigate() 跳转到第二个页面，输入用户输入的内容。
代码语言：java复制@Composable
fun Navigation() {
val navController = rememberNavController()
NavHost(navController = navController, startDestination = "first_screen") {
composable("first_screen") {
FirstScreen { name ->
navController.navigate("second_screen/$name")
}
}
composable("second_screen/{name}") { backStackEntry ->
val name = backStackEntry.arguments?.getString("name") ?: ""
SecondScreen(name = name) {
navController.navigate("first_screen")
}
}
}
}2.7 完整结构整合
代码语言：java复制@Composable
fun App() {
Navigation()
}
@Preview(showBackground = true)
@Composable
fun AppPreview() {
App()
}2.8 演示视频
三、技术难点
3.1 Jetpack Compose的状态管理
Compose 的状态管理与传统安卓开发模式有很大不同。在传统模式下，开发者通常通过 Activity 和 Fragment 来管理 UI 和状态，而在 Compose 中，所有 UI 是基于状态的变化重新组合的。所以，我们需要深入理解并习惯使用 remember 和 mutableStateOf 等状态管理工具，确保在屏幕重新组合时状态能够正确保存。
3.2 页面间的参数传递
在多个页面之间传递数据是导航中的常见需求。Jetpack Navigation 提供了通过路由传递参数的机制，但与传统的 Intent 或 Bundle 方式不同。在 Compose 中，参数通过 NavBackStackEntry 获取，对于习惯了传统开发模式的开发者来说，这种方式需要慢慢适应。
3.3 布局和组件的灵活使用
Jetpack Compose 提供了丰富的 UI 组件和布局工具，但由于它是声明式的，我们必须思考如何将 UI 组件与状态管理紧密结合。相比于 XML 布局文件，Compose 的布局代码更加简洁，但也更依赖于对编程语言的熟练使用。尤其是在复杂布局和动态更新时，需要考虑如何合理地Jetpack Compose 提供了丰富的 UI 组件和布局工具，但由于声明式特性，我们必须思考如何把 UI 组件与状态管理紧密结合。
四、学习笔记
4.1 掌握Jetpack Compose的基础
在项目开发初期，首先需要学习 Jetpack Compose 的基本语法和使用方式。Compose 中的每个 UI 组件都是一个函数，通过函数的组合可以快速构建复杂的界面。比如 Column、Row 这样的布局容器可以让我们非常方便控制 UI 元素的排列。
4.2 理解 Compose 中的状态管理
通过 remember 和 mutableStateOf，我们可以轻松管理 UI 组件的状态，根据状态的变化动态更新界面。还有，理解 LaunchedEffect 和 SideEffect 这些特殊的状态控制函数也很重要，它们可以帮助我们在不同的生命周期进行副作用操作。
4.3 Jetpack Navigation 的使用
Navigation 组件Compose 提供了页面管理功能。通过 NavController，轻松实现页面跳转，在页面之间传递参数。在Demo中，思考如何通过 NavBackStackEntry 获取传递的参数，在多个页面之间实现数据的双向传递。
五、总结
通过这个简单的Demo，讲解了 Jetpack Compose 和 Jetpack Navigation 的使用方法，理解了声明式 UI 开发的优势。和传统的 View 系统相比，Compose 的开发体验更加简洁直观，减少了许多模板代码，同时提高了 UI 更新的灵活性。在状态管理和页面导航方面。
展望未来，Jetpack Compose 很快要成为安卓开发的主流，它的声明式开发模式使 UI 和业务逻辑分离得很彻底。这次Demo开发让我很熟悉如何在实际App中使用Compose的上手方法。
有任何问题欢迎提问，感谢大家阅读 )
