Kotlin Jetpack compose Center text in Column inside a LazyColum-CodePudding

I'am new to jetpack compose and i really liked it. But ran into a problem : I want to create a card and inside of it, i would like to display a list of item with divider between them. I was almost able to achieved it here is my code :

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),
                        )
                    }
                }
            }
        }
    }
}

It's almost good but i didn't managed to align the text inside it, i searched some answer but Alignment and Arrangement doesn't change anything in my situation.

I was able to align horizontally by adding textAlign = TextAlign.Center as i commented in my code but, i couldn't align vertically, the text stay on the top of his cell :

What i want to do is text center in every cell of the column. Thanks for the help.

CodePudding user response：

You can achieve this by adding similar xml attribute like "wrap_content" as height in compose too.

Add "wrapContentHeight()" to modifier and you will get it to align to centre of the page.

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