compose-ui

Jetpack Compose 最佳实践

说明

遵循以下指南，创建高性能、可复用且易于测试的 Composable。

1. 状态提升（单向数据流）

尽可能让 Composable 无状态，将状态移至调用方。

• 模式：函数签名通常应如下所示：

  @Composable
  fun MyComponent(
      value: String,              // 状态向下传递
      onValueChange: (String) -> Unit, // 事件向上传递
      modifier: Modifier = Modifier // 标准 modifier 参数
  )
  

• 优点：将 UI 与简单的状态存储解耦，让预览和测试更容易。
• ViewModel 集成：屏幕级 Composable 从 ViewModel 获取状态（viewModel.uiState.collectAsStateWithLifecycle()），并将其向下传递。

2. Modifier

• 默认参数：始终将 modifier: Modifier = Modifier 作为第一个可选参数。
• 应用方式：将此 modifier 应用于 Composable 的根布局元素。
• 顺序很重要：padding().clickable() 和 clickable().padding() 的效果不同。通常，如果希望 padding 区域也可点击，应将影响布局的 modifier（如 padding）放在点击监听器之后。

3. 性能优化

• remember：使用 remember { ... } 缓存计算开销较大的结果，以便在重组之间复用。
• derivedStateOf：当状态频繁变化（如滚动位置），但 UI 只需响应某个阈值或摘要信息（例如，显示“返回顶部”按钮）时，使用 derivedStateOf { ... }。这可以避免不必要的重组。

  val showButton by remember {
      derivedStateOf { listState.firstVisibleItemIndex > 0 }
  }
  

• Lambda 稳定性：优先使用方法引用（例如，viewModel::onEvent）或记忆化的 lambda，避免不稳定类型触发子组件重组。

4. 主题和资源

• 使用 MaterialTheme.colorScheme 和 MaterialTheme.typography，而不是硬编码颜色或文本样式。
• 如果简单的 UI 组件会在多个功能间共享，请将其整理到专门的文件中（例如，DesignSystem.kt 或 Components.kt）。

5. 预览

• 为每个公开的 Composable 创建一个私有预览函数。
• 使用 @Preview(showBackground = true)，并在适用时添加浅色/深色模式预览。
• 为无状态 Composable 的预览传入虚拟数据（静态数据）。