如何让LazyVerticalGrid居中且占用最小必要空间？

问题出在LazyVerticalGrid默认会占满父容器宽度，搭配GridCells.Fixed(emojis.size)时，每列会均分整个宽度，导致每个Text所在的列被拉伸，内容自然左对齐。要实现项仅占自身所需空间+整体居中，可以通过以下修改：

val emojis = listOf("A", "B")

Column {
    // 可选：让标题也居中
    Text(text = "Hi", modifier = Modifier.align(Alignment.CenterHorizontally))

    LazyVerticalGrid(
        columns = GridCells.Fixed(emojis.size),
        horizontalArrangement = Arrangement.spacedBy(16.dp), // 可自定义项间距
        modifier = Modifier.wrapContentWidth() // 让网格宽度适配内容，而非占满父容器
                          .align(Alignment.CenterHorizontally) // 网格整体在Column中水平居中
    ) {
        items(emojis) {
            Text(text = it, style = MaterialTheme.typography.h6)
        }
    }
}

关键修改点： #

• Modifier.wrapContentWidth()：限制网格宽度仅包裹内部内容，避免列被强制拉伸均分父容器宽度。
• Modifier.align(Alignment.CenterHorizontally)：让网格整体在Column中水平居中对齐。
• 可选的Arrangement.spacedBy()：添加项之间的间距，优化视觉效果。

如果后续需要支持多行展示，这个方案依然适用——新增的项会自动换行，且每一行的宽度都会适配内容并保持居中。

内容的提问来源于stack exchange，提问作者J. Doe