3. LazyVerticalGrid 与网格按需加载：固定网格、自适应网格、跨列复用、避免 OOM

3.1 原理概述

LazyVerticalGrid 是 Jetpack Compose 提供的垂直滚动网格容器。它与 LazyColumn 共享相同的懒加载机制：只有进入视口（viewport）的可组合项才会被合成、布局和绘制，未进入视口的项被回收并复用。这种按需加载策略可以显著降低内存占用，但在网格场景下存在特殊挑战：

• 测量阶段差异：网格需要同时确定行数和列数，计算跨度（span）和交叉轴尺寸。
• OOM 诱因：若网格项包含大图片、复杂图形或未绑定的数据源，仍可能因可见项过多或图片解码缓存爆炸导致内存溢出。
• 复用粒度：LazyVerticalGrid 的 key 管理与行内复用对滑动性能至关重要。

3.2 核心 API 与参数

3.3 固定网格与自适应网格

3.3.1 GridCells.Fixed

指定固定列数，例如 2 列网格：

LazyVerticalGrid(
    columns = GridCells.Fixed(2),
    modifier = Modifier.fillMaxSize()
) {
    items(100) { index ->
        Text("Item $index", modifier = Modifier.padding(8.dp))
    }
}

3.3.2 GridCells.Adaptive

根据可用宽度自动计算出列数，每列至少 minSize 像素：

LazyVerticalGrid(
    columns = GridCells.Adaptive(minSize = 128.dp),
    modifier = Modifier.fillMaxSize()
) { ... }

当屏幕宽度为 360dp 时，列数计算为 floor(360 / 128) = 2；宽度 500dp 时变为 3 列。自适应网格能兼容平板和手机。

3.4 跨列复用（span）

通过 grid.span 扩展函数让一个 item 占据多列，常用于头部或宽卡片：

LazyVerticalGrid(
    columns = GridCells.Fixed(2),
    modifier = Modifier.fillMaxSize()
) {
    // 占据全宽的行
    item(span = { GridItemSpan(maxLineSpan) }) {
        Text("Header", modifier = Modifier.fillMaxWidth())
    }
    // 普通两列子项
    items(10) { index ->
        Card(modifier = Modifier.padding(4.dp)) { Text("Item $index") }
    }
}

跨列复用与 key 参数配合，确保避免重新创建浪费：

items(data, key = { it.id }) { item -> ... }

3.5 避免 OOM 的策略

1. 图片分页加载：不要一次性加载所有图片，使用 SubcomposeLayout 或第三方库（Coil/Glide）的懒加载。
2. 内存缓存上限：设置图片解码缓存（如 Coil 的 MemoryCache）大小，避免占用过多堆内存。
3. 数据源分页：结合 Paging 3 库，仅加载当前可见页数据，远离视口的数据自动回收。
4. 避免大对象在 item 中持久持有：Compose 的 remember 和 derivedStateOf 应只保留轻量计算，不要缓存大量 Bitmap。
5. 显式 key 与 remove：传递稳定且唯一的 key，帮助 Compose 判断哪些 item 可以复用。

3.6 常见错误与解决方案

3.7 调试与部署建议

• 使用 Android Studio Layout Inspector 选中 LazyVerticalGrid，观察“LazyGridItemInfo”面板中可见 item 数量是否合理。
• 在构建配置开启 isDebug 时，在 compositionLocalOf 中记录 item 创建次数。
• 部署前通过 Monkey 测试或手动快速滚动验证内存稳定，控制循环回收次数。
• 对于图片密集网格，使用 coil 的 CrossfadePlugin 时注意关闭预加载，避免非可视区域解码。