2. LazyGrid 组件选型对比：GridLayout 与 StaggeredGridLayout 的区别、LazyVerticalStaggeredGrid 配置项、适用场景与性能基线

2.1 核心原理差异

Jetpack Compose 中 LazyVerticalGrid 使用 GridLayout.Fixed 或 GridLayout.Adaptive 实现等高等宽的规则网格；LazyVerticalStaggeredGrid 则基于 StaggeredGridLayout，允许每个单元格在主轴方向（竖直方向）具有不同的高度，形成“瀑布流”效果。

2.2 LazyVerticalStaggeredGrid 核心配置项

关键参数包括 columns、contentPadding、horizontalArrangement、verticalItemSpacing 等。以下为典型初始化代码：

@Composable
fun WaterfallScreen() {
    val data = remember { generateSampleItems() }
    LazyVerticalStaggeredGrid(
        columns = StaggeredGridCells.Fixed(2),
        contentPadding = PaddingValues(8.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalItemSpacing = 8.dp,
        modifier = Modifier.fillMaxSize()
    ) {
        items(data, key = { it.id }) { item ->
            StaggeredCard(item)
        }
    }
}

StaggeredGridCells.Fixed(n) 固定 n 列；StaggeredGridCells.Adaptive(minSize) 根据最小宽度自适应列数。

2.3 适用场景对比

• LazyVerticalGrid (GridLayout)：商品网格、相册缩略图、等高铁 app 菜单。
• LazyVerticalStaggeredGrid (StaggeredGridLayout)：笔记/卡片瀑布流、小红书/花瓣式布局、动态高度内容（博客摘要、多图卡片）。

2.4 性能基线指标（典型参考值）

在 30 条每屏的数据下（Pixel 6 模拟器，Release 模式），两种组件关键指标如下：

当 item 高度差异较大时，StaggeredGrid 的布局计算额外增加约 20% 的测量时间。建议配合 Modifier.drawWithContent 或预加载占位符优化首屏。

2.5 布局流程对比 SVG

2.6 调试核心方法

1. 开启 Compose 布局 inspector：adb shell setprop debug.compose.inspect true
2. 使用 Android Studio Layout Inspector 查看各 item 的测量尺寸与布局位置。
3. 在 LazyVerticalStaggeredGrid 的 item 中临时添加 Modifier.border(2.dp, Color.Red) 观察视觉对齐。
4. 检查 logcat 中 Compose:remeasure 次数，若频繁调优 key 和重组范围。

2.7 性能优化要点

• 为每个 item 提供稳定且唯一的 key，避免不必要的重组。
• 避免在 item 内部使用 Modifier.animateContentSize 导致瀑布流反复重排。
• 使用 Modifier.layout 或 SubcomposeLayout 对超长内容提前截断，降低测量开销。
• 配合 Constraints 限制 item 最大高度，防止单条巨高 item 阻塞预取。