Jetpack Compose Vertical Grid如何设置单个item的span size跨列？

云原生阿岚

2026-10-2

Compose 网格条目自定义占用列数实现方案

Compose 原生的 LazyVerticalGrid 组件完全支持单条目自定义跨度能力，和 XML 中 GridLayoutManager.SpanSizeLookup 的使用效果一致，实现方式如下：

核心实现逻辑

声明 LazyVerticalGrid 时先通过 columns 参数配置全局列规则，比如固定3列可使用 GridCells.Fixed(3)
在 item 或 items 方法中传入 span 参数，根据需求返回对应列数的 GridItemSpan 即可

代码示例

单条目占满整行示例

LazyVerticalGrid(
    columns = GridCells.Fixed(3),
    modifier = Modifier.fillMaxSize()
) {
    // 首条目占满整行，maxLineSpan会自动获取当前行的总列数，无需硬编码
    item(span = { GridItemSpan(maxLineSpan) }) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(120.dp)
                .background(Color.Blue)
        )
    }
    // 其余普通条目默认占1列
    items(10) { index ->
        Box(
            modifier = Modifier
                .aspectRatio(1f)
                .padding(8.dp)
                .background(Color.LightGray, RoundedCornerShape(8.dp))
        ) {
            Text(text = "普通条目 $index", modifier = Modifier.align(Alignment.Center))
        }
    }
}

批量条目动态设置跨度示例

如果需要在列表中根据条目位置动态调整跨度，可以在 items 的 span 回调中判断处理：

items(
    count = 20,
    span = { index ->
        // 每第4个条目占用2列，其余占用1列
        if ((index + 1) % 4 == 0) GridItemSpan(2) else GridItemSpan(1)
    }
) { index ->
    // 条目内容实现
}