ComposeView 组件基础：在 XML 布局中嵌入 Compose 内容

1. 原理：桥接两个世界的容器

ComposeView 是 android.view.ViewGroup 的子类，负责在传统 XML 布局体系中开辟一个“Compose 渲染区域”。当系统请求 View 绘制时，ComposeView 通过内部的 AndroidComposeView 接管 Canvas，运行 Compose 组合树。其核心工作流程：

1. XML 布局实例化 ComposeView；
2. 调用 setContent 绑定 Composable 函数；
3. Compose 运行时根据状态生成组合树并测量、布局、绘制；
4. View 系统与 Compose 系统通过 ViewCompositionStrategy 协同生命周期。

2. SVB 组件结构图

3. 实现流程：XML 布局中嵌入 Compose

3.1 添加依赖

确保 Module 级 build.gradle 已包含 Compose 基础库：

implementation "androidx.compose.ui:ui:1.6.0"
implementation "androidx.compose.foundation:foundation:1.6.0"
implementation "androidx.compose.material:material:1.6.0"
implementation "androidx.activity:activity-compose:1.8.0"

3.2 在 XML 布局中声明 ComposeView

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="原始 View 标题" />

    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/compose_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

3.3 在 Activity/Fragment 中调用 setContent

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val composeView = findViewById<ComposeView>(R.id.compose_view)
        // 设置生命周期与 View 树同步
        composeView.apply {
            setViewCompositionStrategy(
                ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed
            )
            setContent {
                // Composable 内容
                MaterialTheme {
                    Greeting(name = "Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        Text(text = "Hello $name!", style = MaterialTheme.typography.h4)
        Button(onClick = { /* 交互逻辑 */ }) {
            Text("点击")
        }
    }
}

4. setContent 方法剖析

5. 尺寸控制策略

ComposeView 的尺寸由三个层级共同决定：

• XML LayoutParams：android:layout_width / android:layout_height 最外层约束（如 match_parent、wrap_content、固定 dp）。
• Compose Modifier：内部 Composable 的 Modifier.fillMaxWidth()、.size()、.requiredSize() 会覆盖或协商外部约束。
• 测量回调：setOnComposeViewLayoutListener（API 1.3+）允许在测量前拦截尺寸。

6. 调试与常见错误

6.1 常见错误与解决方案

6.2 调试技巧

• 在 setContent 内部添加 CompositionLocalProvider 注入自定义调试信息。
• 使用 Android Studio 的 Layout Inspector 查看 Compose 层级的测量值。
• 在开发者选项开启“显示布局边界”，观察 ComposeView 实际渲染区域。

7. 性能与稳定性优化

• 避免频繁重组：将 setContent 内传入的 Composable 函数抽取为稳定函数，并使用 remember、derivedStateOf 减少无谓重组。
• 合理的 ViewCompositionStrategy：DisposeOnViewTreeLifecycleDestroyed 比默认的 DisposeOnDetachedFromWindow 更安全，避免 Fragment 回退时内存泄漏。
• 尺寸缓存：如果 ComposeView 尺寸极少变化，可在测量回调中使用 setExactMeasureSpec（Android 13+）跳过二次测量。
• 懒加载：对于列表/长内容，优先使用 LazyColumn 而非 Column，避免内容超出 ComposeView 尺寸导致 OOM。
• 降低绘制复杂度：避免在 ComposeView 内部嵌套过多 Canvas 绘制，使用 pncf（Pre-Nested-Composable-Flag）时注意子树深度。