如何在Jetpack Compose中创建带合并单元格的像素完美网格

你的核心问题是两行单元格的基础宽度不一致——用weight时两行的间距数量不同，导致分配的剩余空间比例有差异，最终布局错位。下面提供两种可靠的实现方式：

方式一：精确计算尺寸的 Column + Row 实现 #

先统一计算基础单元格宽度，再基于该宽度构建所有元素，保证像素级对齐：

@Composable
fun PerfectGrid() {
    val gap = 20.dp
    val screenWidth = LocalConfiguration.current.screenWidthDp.dp
    // 计算基础单元格宽度：屏幕宽度减去4个间距后，平均分给5个单元格
    val baseCellWidth = (screenWidth - 4 * gap) / 5

    Column(
        modifier = Modifier.fillMaxWidth(),
        verticalArrangement = Arrangement.spacedBy(gap)
    ) {
        // 第一行：5个等大单元格
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.spacedBy(gap)
        ) {
            repeat(5) {
                Box(
                    modifier = Modifier
                        .width(baseCellWidth)
                        .aspectRatio(1f)
                        .background(Color.Red)
                )
            }
        }

        // 第二行：3个基础单元格 + 1个合并单元格（2个基础宽度+1个间距）
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.spacedBy(gap)
        ) {
            repeat(3) {
                Box(
                    modifier = Modifier
                        .width(baseCellWidth)
                        .aspectRatio(1f)
                        .background(Color.Red)
                )
            }
            Box(
                modifier = Modifier
                    .width(baseCellWidth * 2 + gap)
                    .aspectRatio((baseCellWidth * 2 + gap) / baseCellWidth)
                    .background(Color.Red)
            )
        }
    }
}

方式二：用 LazyVerticalGrid 实现（更简洁） #

LazyGrid 完全适用于全屏网格场景，即使只有少量内容也能轻松处理，还能自动管理间距和合并单元格：

@Composable
fun PerfectGridWithLazyGrid() {
    LazyVerticalGrid(
        columns = GridCells.Fixed(5), // 定义网格总列数为5
        verticalArrangement = Arrangement.spacedBy(20.dp),
        horizontalArrangement = Arrangement.spacedBy(20.dp),
        modifier = Modifier.fillMaxWidth()
    ) {
        // 第一行：5个占1列的单元格
        items(5) {
            Box(
                modifier = Modifier
                    .aspectRatio(1f)
                    .background(Color.Red)
            )
        }

        // 第二行：3个占1列，1个占2列的单元格
        repeat(3) {
            item(span = { GridItemSpan(1) }) {
                Box(modifier = Modifier.aspectRatio(1f).background(Color.Red))
            }
        }
        item(span = { GridItemSpan(2) }) {
            Box(modifier = Modifier.aspectRatio(2f).background(Color.Red))
        }
    }
}

两种方式都能实现你要的像素完美效果：第一行5个等宽红色方块，第二行前3个方块和第一行尺寸一致，第四个方块宽度等于两个基础方块加中间间距的总和，整体完全对齐屏幕宽度。

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