在Jetpack Compose中如何给LazyVerticalGrid添加类似LazyColumn的stickyHeader？

核心是使用LazyVerticalGrid原生提供的跨列配置能力，无需嵌套同方向滚动容器，具体实现如下：

1. 声明LazyVerticalGrid时指定网格总列数为3，匹配你需要的n*3布局要求
2. 为标题类item单独配置span参数，指定其跨列数等于总列数，即可实现独占整行的效果

代码示例 #

LazyVerticalGrid(
    columns = GridCells.Fixed(3), // 指定总列数为3
    modifier = Modifier.fillMaxSize()
) {
    // 第一个分组：标题+内容
    item(span = { GridItemSpan(maxLineSpan) }) { // maxLineSpan为当前行总列数，此处自动等于3
        Text(
            text = "第一个分组标题",
            modifier = Modifier.fillMaxWidth().padding(16.dp)
        )
    }
    items(/* 第一个分组的网格数据列表 */) { item ->
        // 普通网格条目，默认占1列
        YourGridItemContent(item)
    }

    // 第二个分组：标题+内容
    item(span = { GridItemSpan(maxLineSpan) }) {
        Text(
            text = "第二个分组标题",
            modifier = Modifier.fillMaxWidth().padding(16.dp)
        )
    }
    items(/* 第二个分组的网格数据列表 */) { item ->
        YourGridItemContent(item)
    }

    // 更多分组按相同规则添加即可
}

说明 #

• maxLineSpan是LazyGridItemSpanScope内置参数，会自动获取当前行的总列数，即使后续修改网格总列数，标题也会自动适配占满整行，无需修改硬编码数值
• 所有内容都在同一个LazyVerticalGrid中渲染，不存在滚动冲突问题，同时复用Lazy系列组件的视图复用机制，性能表现和普通网格布局一致

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