如何在Jetpack Compose @Preview中展示XML视图？

当然可以，你可以通过AndroidView组件把XML视图包装成Composable，这样既能在@Preview中预览，也能让Showkase识别并纳入设计系统，完美适配你从XML向Compose迁移的过渡需求。

具体实现步骤： #

1. 准备好你的XML布局文件（比如res/layout/legacy_button.xml）
2. 编写一个Composable函数，用AndroidView加载该XML：

@Composable
fun LegacyButtonWrapper() {
    AndroidView(
        factory = { context ->
            // 加载XML布局，root设为null让Compose管理布局大小
            LayoutInflater.from(context).inflate(R.layout.legacy_button, null)
        }
    )
}

3. 给这个包装组件添加@Preview和Showkase注解：

@Preview(showBackground = true)
@ShowkaseComposable(
    name = "遗留XML按钮",
    group = "过渡组件",
    description = "用AndroidView包装的传统XML按钮"
)
@Composable
fun LegacyButtonWrapperPreview() {
    LegacyButtonWrapper()
}

注意事项： #

• 如果XML里有需要动态更新的内容（比如文本、状态），要利用AndroidView的update参数处理，避免直接操作视图实例引发生命周期问题
• 确保XML中用到的资源（如颜色、图标）在Compose环境下能正常访问，尽量使用统一的资源文件
• Showkase会把这个包装后的Composable当成普通Composable处理，所以可以和其他原生Compose组件一起出现在设计系统中

内容的提问来源于stack exchange，提问作者Arknes