Jetpack Compose导航：从基础到高级实践

1. 理解Compose路由跳转的核心概念

现代移动应用开发中，页面导航和路由跳转是最基础也最重要的功能之一。Jetpack Compose作为Android官方推荐的声明式UI框架，其导航机制与传统基于Fragment的导航有着本质区别。Compose Navigation库提供了一套专为Compose设计的API，让我们可以用更简洁的代码实现复杂的导航逻辑。

在传统Android开发中，我们通常使用Intent或FragmentManager进行页面跳转，这种方式需要手动管理返回栈，容易产生内存泄漏问题。而Compose Navigation通过维护一个路由堆栈，自动处理返回逻辑，大大简化了开发流程。它的核心思想是将每个界面视为一个可组合函数，通过唯一的路由路径进行标识和跳转。

注意：Compose Navigation与传统的Navigation Component库虽然名称相似，但它们是针对不同UI体系的解决方案，不能直接混用。Compose Navigation是专门为Compose设计的，API更加简洁。

2. 基础环境配置与依赖引入

2.1 添加必要依赖

在开始使用Compose Navigation之前，需要确保项目已经正确配置了Compose环境。在模块级build.gradle文件中添加以下依赖：

groovy复制dependencies {
    def nav_version = "2.7.7"
    
    implementation "androidx.navigation:navigation-compose:$nav_version"
    implementation "androidx.compose.runtime:runtime-livedata:1.6.4"
    implementation "androidx.lifecycle:lifecycle-viewmodel-compose:2.7.0"
}

这里我们引入了三个关键库：

• navigation-compose：Compose导航的核心库
• runtime-livedata：支持在Compose中使用LiveData
• lifecycle-viewmodel-compose：ViewModel与Compose的集成支持

2.2 基本项目结构规划

合理的项目结构能显著提高导航代码的可维护性。建议采用以下目录结构：

code复制src/main/java/com/example/app/
├── navigation/
│   ├── NavGraph.kt    # 导航图定义
│   └── Destinations.kt # 路由常量定义
├── screens/
│   ├── HomeScreen.kt
│   ├── ProfileScreen.kt
│   └── SettingsScreen.kt
└── MainActivity.kt

这种结构将导航逻辑与UI实现分离，符合关注点分离原则。所有路由路径应集中定义在Destinations.kt中，避免硬编码字符串分散在代码各处。

3. 构建基础导航图

3.1 创建导航控制器

导航控制器(NavController)是Compose Navigation的核心，负责管理导航堆栈和路由状态。通常在可组合函数的顶层创建：

kotlin复制@Composable
fun MyApp() {
    val navController = rememberNavController()
    
    NavHost(navController = navController, startDestination = "home") {
        composable("home") { HomeScreen(navController) }
        composable("profile") { ProfileScreen() }
    }
}

这里有几个关键点：

1. rememberNavController()创建并记住了导航控制器实例
2. NavHost是导航的容器组件，定义了导航的起点和所有可能的路由
3. composable()函数将路由路径与对应的可组合函数关联起来

3.2 定义路由常量

为避免硬编码路由路径，最佳实践是创建一个专门的文件存放所有路由常量：

kotlin复制object Destinations {
    const val HOME = "home"
    const val PROFILE = "profile"
    const val SETTINGS = "settings"
    
    object Profile {
        const val ROOT = "profile"
        const val EDIT = "profile/edit"
    }
}

这种组织方式使得：

• 所有路由路径集中管理，修改时只需改动一处
• 使用嵌套object可以更好地组织相关路由
• 避免了字符串拼写错误导致的导航失败

4. 实现基本页面跳转

4.1 简单跳转实现

在Compose中实现页面跳转非常简单，只需要调用NavController的navigate方法：

kotlin复制@Composable
fun HomeScreen(navController: NavController) {
    Column {
        Button(onClick = { navController.navigate(Destinations.PROFILE) }) {
            Text("前往个人主页")
        }
    }
}

这种跳转方式会将被导航的页面压入返回栈，当用户点击系统返回按钮时，会自动弹出当前页面，回到上一个页面。

4.2 处理返回按钮

Compose Navigation会自动处理系统返回按钮的点击事件，但有时我们需要在界面中添加自定义返回按钮：

kotlin复制@Composable
fun ProfileScreen(navController: NavController) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("个人主页") },
                navigationIcon = {
                    IconButton(onClick = { navController.popBackStack() }) {
                        Icon(Icons.Default.ArrowBack, contentDescription = "返回")
                    }
                }
            )
        }
    ) { innerPadding ->
        // 屏幕内容
    }
}

popBackStack()方法会从导航堆栈中移除当前页面，