📚 课程目录第4章混用场景1

混用场景1：列表头部/尾部使用Compose，中间使用RecyclerView：实现方案、RecyclerView.Adapter动态合并、ItemViewType设计

4.1 场景描述与核心原理

在大型业务列表中，头部（Header）和尾部（Footer）通常用于展示 Banner、搜索栏、加载更多提示等动态 UI。纯 RecyclerView 实现需在 Adapter 中手动管理多个 ViewType，布局复杂且难以复用 Compose 的声明式能力。本场景的核心原理是：将 Header/Footer 托管在 Compose 组件中，中间列表主体仍由 RecyclerView 承载。通过自定义 RecyclerView.Adapter 动态合并两种视图源，利用 ItemViewType 区分 Compose 节点与 RecyclerView 原生节点，实现混合渲染。

4.2 架构总览

4.3 核心实现方案

4.3.1 定义 ViewType 常量

// ViewType 定义
private const val TYPE_COMPOSE_HEADER = 0
private const val TYPE_RECYCLER_ITEM = 1
private const val TYPE_COMPOSE_FOOTER = 2

4.3.2 自定义 RecyclerView.Adapter

Adapter 需要持有三个数据源：Compose Header 的 ComposeNode、中间 RecyclerView 的列表数据、Compose Footer 的 ComposeNode。通过 getItemViewType() 根据位置返回对应类型。

class MixedAdapter(
    private val headerComposable: @Composable () -> Unit,
    private val recyclerItems: List<Any>,
    private val footerComposable: @Composable () -> Unit
) : RecyclerView.Adapter<MixedViewHolder>() {

    // 关键：总 item 数量 = header + recyclerItems + footer
    override fun getItemCount(): Int = 1 + recyclerItems.size + 1

    override fun getItemViewType(position: Int): Int {
        return when {
            position == 0 -> TYPE_COMPOSE_HEADER
            position == itemCount - 1 -> TYPE_COMPOSE_FOOTER
            else -> TYPE_RECYCLER_ITEM
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MixedViewHolder {
        return when (viewType) {
            TYPE_COMPOSE_HEADER -> {
                // 用 ComposeView 包裹 Compose 节点
                val composeView = ComposeView(parent.context).apply {
                    setContent {
                        headerComposable()
                    }
                }
                MixedViewHolder(composeView)
            }
            TYPE_COMPOSE_FOOTER -> {
                val composeView = ComposeView(parent.context).apply {
                    setContent {
                        footerComposable()
                    }
                }
                MixedViewHolder(composeView)
            }
            else -> {
                // 普通 RecyclerView Item，创建原生 ViewHolder
                val view = LayoutInflater.from(parent.context)
                    .inflate(R.layout.item_recycler_normal, parent, false)
                MixedViewHolder(view)
            }
        }
    }

    override fun onBindViewHolder(holder: MixedViewHolder, position: Int) {
        // Compose 类型的 ViewHolder 无需额外绑定（Compose 已自给自足）
        if (holder.itemView is ComposeView) return
        // 原生 Item 绑定数据
        val item = recyclerItems[position - 1] // 减掉 header 偏移
        // 绑定逻辑...
    }
}

// 简化的 ViewHolder
class MixedViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)

4.3.3 ComposeView 生命周期注意事项

✅ 优化提示：ComposeView 在 RecyclerView 中会被反复 attach/detach。请在 onAttachedToWindow 时确保 Compose 的 Composition 处于活跃状态，必要时在 onDetachedFromWindow 调用 disposeComposition()。推荐使用 LocalLifecycleOwner 自动管理。

4.4 调试与常见错误

常见问题	现象	解决方案
Header/Footer 不显示	列表滑动后 Compose 区域空白或闪退	检查 Adapter 中 itemCount 是否包含 +2；检查 ComposeView 是否在 `onCreateViewHolder` 时正确初始化
Compose 内容仅显示初始状态	Header 或 Footer 状态不更新	ComposeView 默认不会自动重组，需通过 `View.setContent` 重新设置；或者将状态提升到 Adapter 外部，使用 `mutableStateOf` 并触发 `notifyDataSetChanged()`
RecyclerView 复用导致 Compose 布局混乱	滚动后 Header 显示为 Footer 内容	在 Adapter 中严格区分 ViewType，确保 Header/Footer 的 ComposeView 各自独立创建，不要使用 ViewPool 共享同一 ComposeView 实例
性能卡顿	频繁重组 Compose 内容导致滑动不流畅	使用 `remember` 缓存状态，避免在 Header/Footer 的 Composable 中使用大量可变状态；可考虑将 Header/Footer 用 `Modifier.drawWithContent` 优化为静态 Canvas

4.5 性能与稳定性优化

避免在 ComposeView 内嵌套 RecyclerView： 本场景 Header/Footer 是简单的展示组件，若内部包含复杂滚动，应使用 NestedScrollConnection 协调。
使用 AsyncListDiffer 管理中间 RecyclerView 数据： 推荐使用 AsyncListDiffer 或 SortedList 减少整体 Adapter 的 notify 范围。
延迟初始化 Compose 环境： 若 Header/Footer 有网络请求等重操作，应使用 LaunchedEffect 在 Compose 的协程中异步加载，避免阻塞主线程。
测试工具： 启用 RecyclerView 的 setLayoutFrozen(false) 配合 Choreographer 检测帧率；使用 LayoutInspector 确认 ComposeView 在 View 层级中的位置。

4.6 完整实现流程（步骤清单）

定义 ViewType 枚举/常量。
创建自定义 Adapter，重写 getItemCount() 为 header(1) + recyclerItems.size + footer(1)。
在 getItemViewType() 中根据 position 返回对应类型。
在 onCreateViewHolder() 中为 Compose 类型直接创建 ComposeView 并设置 setContent。
为原生类型创建传统 ViewHolder。
在 Activity/Fragment 中实例化 Adapter，传入两个 Composable lambda 和列表数据。
将 Adapter 设置给 RecyclerView，确保 LayoutManager 为 LinearLayoutManager。
运行调试，检查 Header/Footer 显示与滚动行为。

⚠️ 避坑提醒： 不要将 ComposeView 的引用保存在静态变量或 ViewHolder 外部，否则会导致 Composition 泄漏。每次创建 ViewHolder 时应使用新的 ComposeView 实例。

4.7 扩展：动态切换 Header/Footer

若需要运行时更新 Header 或 Footer，无需更改 Adapter 结构，只需修改传入的 Composable lambda 状态（使用 mutableStateOf），然后调用 adapter.notifyItemChanged(0) 或 notifyItemChanged(itemCount-1) 触发 ComposeView 重组。