如何在Jetpack Compose的LazyHorizontalGrid中实现文本居中对齐

嘿，我看了你贴的代码，其实你已经走对了大部分方向，但有个小细节调整一下，就能让像“Dental”这样的文本稳稳居中在LazyHorizontalGrid的item里啦！

你已经给Text设置了textAlign = TextAlign.Center和fillMaxWidth()，这本身是正确的思路，但要确保每个Grid的item本身占据对应列的全部宽度，这样Text的fillMaxWidth()才能真正生效。我帮你调整了代码，重点优化了Modifier的顺序和Grid的对齐设置：

LazyHorizontalGrid(
    rows = GridCells.Fixed(2),
    horizontalArrangement = Arrangement.spacedBy(16.dp),
    verticalArrangement = Arrangement.spacedBy(16.dp),
    modifier = Modifier
        .height(200.dp)
        .padding(top = 55.dp)
        .fillMaxWidth()
) {
    itemsIndexed(otherFacilities) { index, item ->
        Text(
            text = "${item.displayName}",
            modifier = Modifier
                .fillMaxWidth() // 确保每个item占满列宽，这是关键
                .clickable { selectedFacility = item }
                .background(color = Color.Gray, shape = RoundedCornerShape(18.dp))
                .padding(5.dp),
            textAlign = TextAlign.Center,
            color = Color.White
        )
    }
}

这里的调整点说明：

• 去掉了align(Alignment.CenterHorizontally)，因为fillMaxWidth()已经让LazyHorizontalGrid占满父布局宽度，额外的对齐设置反而可能干扰item的宽度分配
• 把fillMaxWidth()放在Text Modifier的最前面，这样它会先让Text占据整个Grid item的宽度，后续的背景、padding都会基于这个宽度来渲染，文本自然就能在这个范围内居中了
• 调整后，每个灰色圆角背景的item会均匀分配LazyHorizontalGrid的宽度，文本也会完美居中显示在背景框里

备注：内容来源于stack exchange，提问作者Robert