如何实现偶数索引项左对齐的LazyVerticalStaggeredGrid？

我需要实现一个LazyVerticalStaggeredGrid，要求所有偶数索引的项始终左对齐，不受其他项高度影响。但当前默认布局会根据最后两项的高度将项右对齐。测试代码如下：

LazyVerticalStaggeredGrid(
    contentPadding = PaddingValues(16.dp),
    columns = StaggeredGridCells.Fixed(2),
    verticalItemSpacing = 8.dp,
//            horizontalArrangement = arrangement
) {
    items(3) {
        val height = if (it == 0) {
            240.dp
        } else 150.dp

        Box(
            modifier = Modifier
                .size(itemWidth, height)
                .background(Color.Red, RoundedCornerShape(16.dp)),
            contentAlignment = Alignment.Center
        ) {
            Text("Item: $it", fontSize = 30.sp, color = Color.White)
        }
    }
}

我尝试自定义Arrangement：

val arrangement = remember {
    object : Arrangement.Horizontal {

        var size = 0
        override fun Density.arrange(
            totalSize: Int,
            sizes: IntArray,
            layoutDirection: LayoutDirection,
            outPositions: IntArray,
        ) {

            println(
                "total size: $totalSize," +
                        " sizes: ${sizes.size}, " +
                        "outPositions: ${outPositions.size}"
            )
//                        sizes.forEachIndexed { index, i ->
//                            size = if (index % 2 == 0) 0 else i
//                            try {
//                                outPositions[i] = size
//                            } catch (e: Exception) {
//                                e.printStackTrace()
//                            }
//                        }

        }

    }
}

但此时明明有3项却只显示2项。我试用FlowRow实现相同需求，仅3项时效果符合预期，但项数增多后，FlowRow无法实现交错网格的布局效果。请问如何通过自定义Arrangement或其他方式，让LazyVerticalStaggeredGrid中的项无论其他项高度如何，都从左侧开始对齐？

完整可复现代码：

@Preview
@Composable
fun StaggeredGridAlignTest() {

    BoxWithConstraints(
        modifier = Modifier.padding(16.dp)
    ) {

        val itemWidth = maxWidth / 2 - 8.dp

        val arrangement = remember {
            object : Arrangement.Horizontal {

                var size = 0
                override fun Density.arrange(
                    totalSize: Int,
                    sizes: IntArray,
                    layoutDirection: LayoutDirection,
                    outPositions: IntArray,
                ) {

                    println(
                        "total size: $totalSize," +
                                " sizes: ${sizes.size}, " +
                                "outPositions: ${outPositions.size}"
                    )
//                        sizes.forEachIndexed { index, i ->
//                            size = if (index % 2 == 0) 0 else i
//                            try {
//                                outPositions[i] = size
//                            } catch (e: Exception) {
//                                e.printStackTrace()
//                            }
//                        }

                }

            }
        }

        Column(
            modifier = Modifier.fillMaxSize()
        ) {

            LazyVerticalStaggeredGrid(
                columns = StaggeredGridCells.Fixed(2),
                verticalItemSpacing = 8.dp,
                horizontalArrangement = arrangement
            ) {
                items(3) {
                    val height = if (it == 0) {
                        240.dp
                    } else 150.dp

                    Box(
                        modifier = Modifier
                            .size(itemWidth, height)
                            .background(Color.Red, RoundedCornerShape(16.dp)),
                        contentAlignment = Alignment.Center
                    ) {
                        Text("Item: $it", fontSize = 30.sp, color = Color.White)
                    }
                }
            }

            FlowRow(
                maxItemsInEachRow = 2,
                horizontalArrangement = Arrangement.spacedBy(8.dp),
                verticalArrangement = Arrangement.spacedBy(8.dp)
            ) {

                repeat(3) {
                    val height = if (it == 0) {
                        240.dp
                    } else 150.dp

                    Box(
                        modifier = Modifier
                            .size(itemWidth, height)
                            .background(Color.Red, RoundedCornerShape(16.dp)),
                        contentAlignment = Alignment.Center
                    ) {
                        Text("Item: $it", fontSize = 30.sp, color = Color.White)
                    }
                }
            }
        }
    }
}

自定义Arrangement实现左对齐 #

问题出在之前的自定义Arrangement没有正确计算每个项的位置。我们需要给每个奇数索引的项设置固定偏移（左侧项宽度+水平间距），偶数索引项固定在0位置。

修改后的自定义Arrangement代码如下：

val arrangement = remember {
    object : Arrangement.Horizontal {
        override fun Density.arrange(
            totalSize: Int,
            sizes: IntArray,
            layoutDirection: LayoutDirection,
            outPositions: IntArray,
        ) {
            // 遍历每个项，偶数索引（0,2...）左对齐，奇数索引（1,3...）移到第二列
            sizes.forEachIndexed { index, _ ->
                outPositions[index] = if (index % 2 == 0) {
                    0
                } else {
                    // 第二列起始位置：第一列宽度 + 水平间距
                    (itemWidth + 8.dp).roundToPx()
                }
            }
        }
    }
}

注意这里的itemWidth和8.dp要和网格中设置的项宽度、水平间距保持一致，确保偏移准确。

替代方案：手动控制项的列归属 #

如果自定义Arrangement有兼容性问题，还可以通过itemsIndexed结合SpanSize强制指定每个项的列：

LazyVerticalStaggeredGrid(
    columns = StaggeredGridCells.Fixed(2),
    verticalItemSpacing = 8.dp,
    horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
    itemsIndexed(3) { index, _ ->
        val height = if (index == 0) 240.dp else 150.dp
        // 强制偶数索引项在第一列，奇数在第二列
        val span = if (index % 2 == 0) {
            StaggeredGridItemSpan(1, lineIndex = 0)
        } else {
            StaggeredGridItemSpan(1, lineIndex = 1)
        }
        item(span = span) {
            Box(
                modifier = Modifier
                    .size(itemWidth, height)
                    .background(Color.Red, RoundedCornerShape(16.dp)),
                contentAlignment = Alignment.Center
            ) {
                Text("Item: $index", fontSize = 30.sp, color = Color.White)
            }
        }
    }
}

这种方式直接指定每个项属于哪一列，完全不受其他项高度影响，能确保偶数索引项始终左对齐。

方案对比 #

• 自定义Arrangement：更灵活，适合动态调整布局逻辑，但需要注意尺寸计算的准确性。
• 手动指定SpanSize：更直接，逻辑清晰，适合固定列数的场景，稳定性更高。

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