jetpack compose使用LazyColumn写一个宫格列表

在 Jetpack Compose 中，如果你想使用 `LazyColumn` 创建一个类似宫格式的网格列表，可以结合 `Grid` 或者 `Row` 控件以及 `RecyclerGridState`。下面是一个基本的示例，展示如何将项目分组到网格格子中：

import androidx.compose.foundation.layout.Arrangement.RowMajor
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Grid
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun GridListWithColumns(groups: List<List<String>>) {
    LazyColumn {
        items(groups) { group ->
            Grid(
                columns = 3, 
                spacing = 8.dp,
                contentPadding = PaddingValues(vertical = 8.dp),
                modifier = Modifier.fillMaxWidth(),
                arrangement = Arrangement.RowMajor
            ) {
                group.forEachIndexed { index, item ->
                    if (index % 3 == 2) {
                        Spacer(modifier = Modifier.size(0.dp))
                    } else {
                        Button(onClick = { /* Your click action here */ }) {
                            Text(text = item, style = MaterialTheme.typography.body2)
                        }
                    }
                }
            }
        }
    }
}

// 使用时传递数据
val data = listOf(
    listOf("Group 1 Item 1", "Group 1 Item 2", "Group 1 Item 3"),
    listOf("Group 2 Item 1", "Group 2 Item 2", "Group 2 Item 3"),
    // 更多数据...
)

GridListWithColumns(data)

这个例子中，我们创建了一个懒加载列，每行显示三个元素，当到达网格的最后一行时，会插入一个空隙。每个项目的点击动作可以根据实际需求来实现。