将 XML 视图迁移到 Jetpack Compose

Jetpack Compose 支持与 View 的互操作性，您可以在 View 中使用 Compose，也可以在 Compose 中使用 View。这样一来，您可以在基于 View 的现有应用中采用 Compose，而不必立即迁移所有 View。

迁移步骤

  1. 制定计划：制定周密的分步迁移计划。我们建议您制定迁移任务的优先待办项。
  2. 确定要迁移的 XML 候选对象：确定并从层次结构中的叶节点（最小的组件）开始，自下而上地扩展迁移计划，逐步迁移到层次结构中更高级别的组件。初始迁移的理想候选对象是小型、无状态且依赖项较少的服务。
  3. 分析层次结构：确定要迁移的 XML 视图后，分析其 XML 布局结构和实现。
  4. 捕获初始状态：运行屏幕截图测试，以捕获所选 XML 视图的初始状态。
  5. 前提条件：设置 Compose 依赖项 确定项目是否已设置 Compose 依赖项和编译器。如果不是，请按照设置 Compose 依赖项和编译器中的说明操作。
  6. 前提条件：设置 Compose 主题 确定项目是否已设置 Compose 主题。如果不是，请按照 Compose 主题设置中的说明操作。在应用进行互操作时保留原始 XML 主题将 XML 主题迁移到 Compose，了解如何声明状态，直到项目完全迁移到 Compose。
  7. 将 XML 视图迁移到 Compose：开始将 XML 代码转换为 Compose，应用相应的主题，并为迁移的 composable 添加 Compose 预览。如需了解常见迁移方案，请参阅其他资源。例如，如需迁移到 Compose 中的 Lazy API，请按照将 RecyclerView 迁移到 Compose 中的步骤操作。
  8. 替换用法：替换之前使用 XML View 的方式，改为使用新的 Compose 组件。如需在视图中添加 Compose，请按照视图中的 Compose 中的步骤操作。如需在 Compose 中添加 View，请按照在 Compose 中使用 View 中的步骤操作。
  9. 验证迁移：验证屏幕截图测试中捕获的初始状态是否与迁移后的可组合项的 Compose 预览相同。如果不匹配，请迭代新的可组合界面并对其进行改进，使其与初始状态保持一致。为新的可组合项创建新的 Compose 界面测试。
  10. 移除 XML：新迁移的可组合项与初始 XML 界面匹配后，移除过时的 XML View 代码及其测试。

常见迁移场景

验证可组合项中是否使用了 dp 和 sp 扩展函数（16.dp、20.sp）。如果 XML 视图中存在 tools:text，请在单独的 @Preview 可组合项中使用它。

从属性到修饰符的转换

大多数 XML 属性都会成为 modifier 链或可组合函数的参数的一部分。

XML 属性 Compose 等效项
android:layout_width="match_parent" Modifier.fillMaxWidth()
android:layout_height="match_parent" Modifier.fillMaxHeight()
android:layout_width="wrap_content" （默认行为，通常不需要修饰符）
android:padding="Xdp" Modifier.padding(X.dp)
android:layout_margin="Xdp" Modifier.padding(X.dp)（外边距）
android:gravity="center" contentAlignment = Alignment.Center（盒子）或 horizontalAlignment / verticalArrangement（列/行）
android:background="@color/white" Modifier.background(colorResource(R.color.white))
android:visibility="gone" 封装在 if (visible) { ... } 块中

迁移样式 (styles.xml)

XML 样式通常会组合多个属性来创建样式。在 Compose 中，这是通过创建具有特定样式的可组合项变体来实现的。

提供单独的 @Composable 函数，并根据样式和基本组件命名，以表明这些组件在样式和使用情形方面的差异。

  • 模式：如果 XML 元素使用自定义样式（例如，style="@style/MyPrimaryButton"），请勿尝试内嵌复制样式。而是建议创建特定的可组合项。
  • 示例：
    • XML： <Button style="@style/MyPrimaryButton" ... />
    • 撰写： MyPrimaryButton(onClick = { ... })
  • 常见属性组：如果样式设置了常见的修饰符（例如内边距 + 高度），请将它们提取到可读的扩展属性或共享的修饰符变量中。