使用Compose实现含通栏横幅的三列垂直列表的最佳实践咨询

方案一：用LazyVerticalGrid + 自定义跨度 #

这是最贴合需求的原生方案，LazyVerticalGrid本身支持配置item的跨度大小。给网格设置固定3列，普通列表项用默认跨度1，横幅类组件设置跨度为3即可占满整行。

示例代码：

LazyVerticalGrid(
    columns = GridCells.Fixed(3),
    contentPadding = PaddingValues(8.dp),
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp)
) {
    // 普通三列列表项
    items(15) { index ->
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(120.dp)
                .background(Color.LightGray),
            contentAlignment = Alignment.Center
        ) {
            Text("列表项 $index")
        }
    }
    // 跨三列的横幅组件
    item(span = { GridItemSpan(3) }) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(80.dp)
                .background(Color(0xFF2196F3)),
            contentAlignment = Alignment.Center
        ) {
            Text("全屏横幅", color = Color.White, fontSize = 18.sp)
        }
    }
    // 继续添加普通列表项
    items(10) { index ->
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(120.dp)
                .background(Color.LightGray),
            contentAlignment = Alignment.Center
        ) {
            Text("列表项 ${15 + index}")
        }
    }
}

方案二：LazyColumn嵌套三列布局 #

如果更习惯用LazyColumn，可以把三列的列表段用Row（或LazyRow，适合大量列表项）包裹，然后直接在需要的位置插入全屏宽度组件。这种方式需要自己控制列的权重和间距，适合需要更灵活布局逻辑的场景。

示例代码：

LazyColumn(
    contentPadding = PaddingValues(8.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp)
) {
    // 多行三列列表：循环生成每行3个项
    items(5) { rowIndex ->
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            repeat(3) { colIndex ->
                val itemIndex = rowIndex * 3 + colIndex
                Box(
                    modifier = Modifier
                        .weight(1f)
                        .height(120.dp)
                        .background(Color.LightGray),
                    contentAlignment = Alignment.Center
                ) {
                    Text("列表项 $itemIndex")
                }
            }
        }
    }
    // 全屏横幅
    item {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(80.dp)
                .background(Color(0xFF2196F3)),
            contentAlignment = Alignment.Center
        ) {
            Text("全屏横幅", color = Color.White, fontSize = 18.sp)
        }
    }
    // 继续添加三列列表段
    item {
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            repeat(3) { colIndex ->
                val itemIndex = 15 + colIndex
                Box(
                    modifier = Modifier
                        .weight(1f)
                        .height(120.dp)
                        .background(Color.LightGray),
                    contentAlignment = Alignment.Center
                ) {
                    Text("列表项 $itemIndex")
                }
            }
        }
    }
}

方案三：自定义Layout（特殊场景） #

如果上述两种方案无法满足复杂的布局规则（比如动态调整列数、特殊排版逻辑），可以自定义Layout，手动测量和摆放普通三列项与全屏组件。这种方式实现成本较高，仅推荐用于特殊需求场景。

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