Kotlin Jetpack 在 LazyColum 内的 Column 中撰写中心文本

Question

我是 jetpack compose 的新手，我真的很喜欢它。但遇到了一个问题：我想创建一张卡片，在其中，我想显示一个项目列表，项目之间有分隔线。我几乎能够实现它，这是我的代码：

Box(modifier = Modifier.background(Color(0xFFf4f4f4))
    .fillMaxSize()
    .padding(top = 20.dp)) {
    Card(
        modifier = Modifier
            .fillMaxWidth(),
        shape = RoundedCornerShape(20.dp),
        elevation = 5.dp
    ) {
        val colorNamesList = listOf("Red", "Green", "Blue", "Indigo")
        LazyColumn() {
            itemsIndexed(
                colorNamesList,
            ) { index, item ->
                Column(
                    modifier = Modifier
                        .background(
                            color = Color(0xFFf2f2f2),
                        )
                        .clickable {
                            println(item)
                        },
                    horizontalAlignment = Alignment.CenterHorizontally,//those 2 does nothing 
                    verticalArrangement = Arrangement.Center //when i change it nothing change
                ) {
                    println(item + index)
                    Text(
                        text = "Item at  $item",
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(50.dp),
                        //textAlign = TextAlign.Center, without it image 1, with it image 2
                        color = Color.Black,
                    )
                    if (index < colorNamesList.lastIndex) {
                        Divider(
                            color = Color.Black.copy(alpha = 0.2f),
                            modifier = Modifier
                                .padding(horizontal = 80.dp),
                        )
                    }
                }
            }
        }
    }
}

这几乎很好，但我没有设法对齐其中的文本，我搜索了一些答案，但对齐和排列并没有改变我的情况。

正如我在代码中注释的那样，我可以通过添加 textAlign = TextAlign.Center 来水平对齐，但是，我无法垂直对齐，文本保留在单元格的顶部：

我想要做的是列的每个单元格中的文本中心。谢谢您的帮助。

Answer 1

您也可以通过在 compose 中添加类似的 xml 属性（例如“wrap_content”）作为高度来实现此目的。

将“wrapContentHeight()”添加到修饰符中，您将使其与页面中心对齐。

Text(
                    text = "Item at  $item",
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(50.dp)
                        .wrapContentHeight(),
                    textAlign = TextAlign.Center
                    color = Color.Black,
                )