如何在Jetpack Compose中创建每行单元格数不规则的LazyVerticalGrid或网格？

如果你要实现类似示例图中每行单元格数量不同的网格布局，有两种常用方案可选，根据需求灵活选择：

方案1：基于LazyVerticalGrid的固定列数+自定义跨度 #

这种方式适合规整的不规则布局（比如一行1个、一行2个、一行3个这类等分场景），通过设置总列数，再给每个元素指定占据的列数来实现。

代码示例 #

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.GridItemSpan
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun IrregularGridExample() {
    // 设为所有可能列数的公倍数，方便计算跨度
    val totalColumns = 6

    LazyVerticalGrid(
        columns = GridCells.Fixed(totalColumns),
        contentPadding = PaddingValues(8.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        // 占满整行（1个元素）
        item(span = { GridItemSpan(totalColumns) }) {
            GridItem(color = Color.Blue, text = "1个元素")
        }

        // 一行2个元素，每个占3列
        items(2) { index ->
            item(span = { GridItemSpan(totalColumns / 2) }) {
                GridItem(color = Color.Green, text = "第${index+1}个")
            }
        }

        // 一行3个元素，每个占2列
        items(3) { index ->
            item(span = { GridItemSpan(totalColumns / 3) }) {
                GridItem(color = Color.Yellow, text = "第${index+1}个")
            }
        }

        // 自定义跨度组合：2列 + 2列 + 2列
        listOf(Color.Red, Color.Cyan, Color.Magenta).forEach { color ->
            item(span = { GridItemSpan(2) }) {
                GridItem(color = color, text = "占2列")
            }
        }
    }
}

@Composable
private fun GridItem(color: Color, text: String) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(120.dp)
            .background(color),
        contentAlignment = Alignment.Center
    ) {
        Text(text = text, color = if (color == Color.Yellow) Color.Black else Color.White)
    }
}

方案2：流式布局（FlowLayout） #

如果需要更灵活的不规则布局（比如元素宽度不固定、自动换行），可以使用Accompanist库提供的FlowRow组件。

步骤1：添加依赖 #

在build.gradle中引入Accompanist FlowLayout库：

implementation "com.google.accompanist:accompanist-flowlayout:0.32.0"

代码示例 #

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.google.accompanist.flowlayout.FlowRow

@Composable
fun FlowLayoutExample() {
    FlowRow(
        mainAxisSpacing = 8.dp,
        crossAxisSpacing = 8.dp,
        modifier = Modifier.padding(8.dp)
    ) {
        // 自定义宽度的元素，自动换行
        GridItemCustomWidth(Color.Blue, "宽200dp", width = 200.dp)
        GridItemCustomWidth(Color.Green, "宽150dp", width = 150.dp)
        GridItemCustomWidth(Color.Yellow, "宽100dp", width = 100.dp)
        GridItemCustomWidth(Color.Red, "占满宽度", width = 0.dp, fillWidth = true)
        GridItemCustomWidth(Color.Cyan, "宽180dp", width = 180.dp)
        GridItemCustomWidth(Color.Magenta, "宽120dp", width = 120.dp)
    }
}

@Composable
private fun GridItemCustomWidth(color: Color, text: String, width: Dp, fillWidth: Boolean = false) {
    val modifier = if (fillWidth) {
        Modifier.fillMaxWidth()
    } else {
        Modifier.width(width)
    }
    Box(
        modifier = modifier
            .height(120.dp)
            .background(color),
        contentAlignment = Alignment.Center
    ) {
        Text(text = text, color = if (color == Color.Yellow) Color.Black else Color.White)
    }
}

两种方案对比 #

• 方案1适合规整的等分不规则布局，基于LazyVerticalGrid的懒加载特性，性能更优，适合大量数据场景。
• 方案2适合非等分、宽度灵活的流式布局，自由度更高，但需要引入第三方库。

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