安卓软件开发：学习Jetpack Compose实现Navigation组件App

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的代码实现

@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的代码实现

@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() 跳转到第二个页面，输入用户输入的内容。

@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 完整结构整合

@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的上手方法。

有任何问题欢迎提问，感谢大家阅读 )