android jatpack Compose 多数据源依赖处理：从状态管理到精准更新的架构设计

Android Compose 多接口数据依赖管理：ViewModel 状态共享最佳实践

📌 问题背景

在 Jetpack Compose 开发中，经常遇到以下场景：

• 页面由多个独立接口数据组成（如 Part1、Part2）
• Part2 的某些 UI 需要依赖 Part1 的数据（如显示 Part1 的某个字段）
• 如何高效管理数据依赖，避免重复请求或状态混乱？

本文将介绍 3 种主流方案，并分析其适用场景。

---

🚀 方案 1：共享 ViewModel（推荐同一页面使用）

核心思想

• 使用同一个 ViewModel 管理 Part1 和 Part2 的数据
• Part2 直接读取 Part1 的状态，无需额外接口调用

代码实现

class SharedViewModel : ViewModel() {
    // Part1 数据
    private val _part1Data = mutableStateOf<Part1Data?>(null)
    val part1Data: State<Part1Data?> = _part1Data

    // Part2 数据
    private val _part2Data = mutableStateOf<Part2Data?>(null)
    val part2Data: State<Part2Data?> = _part2Data

    fun loadAllData() {
        viewModelScope.launch {
            _part1Data.value = repo.getPart1Data() // 先加载 Part1
            _part2Data.value = repo.getPart2Data() // 再加载 Part2
        }
    }
}

@Composable
fun ParentScreen(viewModel: SharedViewModel = viewModel()) {
    val part1Data by viewModel.part1Data
    val part2Data by viewModel.part2Data

    LaunchedEffect(Unit) { viewModel.loadAllData() }

    Column {
        Part1UI(part1Data)
        Part2UI(part2Data, part1Data) // 将 part1Data 传递给 Part2
    }
}

@Composable
fun Part2UI(part2Data: Part2Data?, part1Data: Part1Data?) {
    Text("Part2 数据: ${part2Data?.value}")
    part1Data?.let { 
        Text("来自 Part1 的数据: ${it.someField}") 
    }
}

✅ 优点

• 状态集中管理，避免数据不一致
• 天然支持依赖关系（如 Part2 依赖 Part1 的某个字段）
• 代码简洁，适合同一页面内的组件通信

❌ 缺点

• 不适用于跨页面场景（如 Part1 和 Part2 属于不同屏幕）

---

🌉 方案 2：参数传递（跨页面场景）

核心思想

• 通过 Navigation 或 Composable 参数显式传递 Part1 的数据
• 适用于 Part1 和 Part2 属于不同页面的情况

代码实现（Navigation Compose）

// 导航定义
NavHost(navController, startDestination = "part1") {
    composable("part1") { 
        Part1Screen { part1Data ->
            navController.navigate("part2/${part1Data.id}") 
        }
    }
    composable("part2/{part1Id}") { backStackEntry ->
        val part1Id = backStackEntry.arguments?.getString("part1Id") ?: ""
        Part2Screen(part1Id)
    }
}

// Part1 页面
@Composable
fun Part1Screen(onNavigate: (Part1Data) -> Unit) {
    val part1Data by viewModel<Part1ViewModel>().part1Data
    Button(onClick = { part1Data?.let(onNavigate) }) {
        Text("进入 Part2")
    }
}

// Part2 页面
@Composable
fun Part2Screen(part1Id: String) {
    val part2Data by viewModel<Part2ViewModel>().part2Data
    Text("Part1 的 ID: $part1Id")
    Text("Part2 数据: ${part2Data?.value}")
}

✅ 优点

• 明确的数据流向，适合跨页面通信
• 符合 Compose Navigation 最佳实践

❌ 缺点

• 需要手动管理参数传递
• 如果数据较复杂，可能需序列化（如 Parcelable）

---

🌐 方案 3：CompositionLocal（全局共享）

核心思想

• 使用 CompositionLocal 提供全局可访问的数据
• 适合 主题、用户信息等全局状态，但不推荐滥用

代码实现

// 定义全局数据
val LocalPart1Data = staticCompositionLocalOf<Part1Data?> { null }

// 在根 Composable 提供数据
@Composable
fun App() {
    val part1Data by viewModel<Part1ViewModel>().part1Data
    CompositionLocalProvider(LocalPart1Data provides part1Data) {
        NavHost(...) // 所有子组件可读取 part1Data
    }
}

// 任意子组件读取
@Composable
fun Part2Component() {
    val part1Data = LocalPart1Data.current
    Text("Part1 数据: ${part1Data?.someField}")
}

✅ 优点

• 避免层层传递参数（Prop Drilling）
• 适合 真正全局 的数据（如用户信息、配置）

❌ 缺点

• 过度使用会导致代码难以维护
• 应仅用于 低频变更 的数据

---

📊 方案对比

方案	适用场景	优点	缺点
共享 ViewModel	同一页面/同一 NavGraph	状态集中，依赖管理方便	不适用于跨页面
参数传递	跨页面跳转	明确数据流，符合 Navigation 规范	需手动管理参数
CompositionLocal	全局数据（如用户信息）	避免 Prop Drilling	滥用会导致代码难以维护

---

🎯 终极选择建议

1. 同一页面内组件共享数据 → 方案 1（共享 ViewModel）
2. 跨页面数据传递 → 方案 2（参数传递 + Navigation）
3. 真正全局的数据（如用户信息）→ 方案 3（CompositionLocal）

---

💡 高级技巧

• 如果 Part2 必须在 Part1 加载完成后才能请求，可使用 LaunchedEffect + 状态监听：

  LaunchedEffect(part1Data) {
      if (part1Data != null) {
          viewModel.loadPart2(part1Data.id)
      }
  }
  

• 使用 Flow.combine 合并多个接口数据流：

  val uiState = combine(part1Flow, part2Flow) { p1, p2 ->
      UiState.Success(p1, p2)
  }.stateIn(viewModelScope, SharingStarted.Lazily, UiState.Loading)
  

---

📚 总结

在 Compose 中管理多接口数据依赖时，优先选择共享 ViewModel，其次是参数传递，谨慎使用 CompositionLocal。正确管理状态依赖能让代码更清晰、更易维护！