Jetpack Compose中LazyVerticalStaggeredGrid双列最后一项对齐异常

使用Jetpack Compose的LazyVerticalStaggeredGrid时遇到以下问题：

• 设置2列布局时，网格的最后一项始终右对齐
• 设置3列布局时，最后一项正常左对齐

未反转网格，且不想修改项的结构，需要让双列网格的最后一项和三列网格保持一致的左对齐效果。

示例代码：

@Composable
fun SquareGridScreen(columns: Int) {
    val gridState = rememberLazyStaggeredGridState()
    val itemsList = (1..7).toList()

    LazyVerticalStaggeredGrid(
        columns = StaggeredGridCells.Fixed(columns),
        modifier = Modifier.fillMaxSize(),
        state = gridState,
        horizontalArrangement = Arrangement.spacedBy(5.dp),
        contentPadding = PaddingValues(8.dp),
    ) {

        item(span = StaggeredGridItemSpan.FullLine) {
            Spacer(modifier = Modifier.size(20.dp))
        }

        itemsIndexed(itemsList) { index, item ->
            val itemWidth = Modifier
                .fillMaxWidth(1f / columns)
                .aspectRatio(1f)
            SquareGridItem(modifier = itemWidth)
        }
    }
}

@Composable
fun SquareGridItem(modifier: Modifier) {
    Box(
        modifier = modifier
            .padding(4.dp)
            .background(randomColor()) // 演示用随机背景色
    )
}

fun randomColor(): Color {
    return Color(Random.nextInt(256), Random.nextInt(256), Random.nextInt(256))
}

问题与预期 #

• 问题表现：双列布局下，最后一个网格项显示在右侧位置
• 预期效果：双列布局下，最后一个网格项显示在左侧位置，与三列布局的最后一项对齐方式一致

解决方案 #

问题根源在于手动设置了fillMaxWidth(1f / columns)，这会强制item宽度为总宽度的1/columns比例，但LazyVerticalStaggeredGrid的StaggeredGridCells.Fixed(columns)已经自动为每列分配了正确的宽度，手动设置宽度会干扰网格的布局逻辑，导致最后一项排列异常。

修改方式是将item的宽度设置改为fillMaxWidth()，让item自动填充整个网格cell的宽度：

itemsIndexed(itemsList) { index, item ->
    val itemWidth = Modifier
        .fillMaxWidth()
        .aspectRatio(1f)
    SquareGridItem(modifier = itemWidth)
}

这样修改后，无论是2列还是3列布局，最后一项都会自动左对齐，且保持正方形的显示效果。

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