Jetpack Compose：在 ListItem 中居中图标或尾随元素

Question

I'm trying to center the icon and trailing elements vertically using a ListItem. I'm not sure if it is possible or I need to drop the ListItem and use a combination of column/row instead.

I'm using something like:

ListItem(
    Modifier.clickable(onClick = onClick),
    icon = {
        Box(
           modifier = Modifier.fillMaxHeight(), contentAlignment = ALignment.Center
        ) {
            Text(
                text = dateUtil.formatTime(item.startTime),
                style = TextStyle(
                    color = SnyDarkBlue,
                    fontSize = 14.sp,
                    fontFamily = oswaldFamily,
                    fontWeight = FontWeight.Bold,
                    letterSpacing = (-0.25).sp,
                ),
            )
        }
    },

thanks in advance!

Answer 1

You can center both the icon and text sections using a Column:

ListItem(
    modifier = Modifier
        .fillMaxWidth()
        .requiredHeight(50.dp)
        .background(color = Color.Gray),
    icon = {
        Column(
            modifier = Modifier
                .fillMaxHeight(), verticalArrangement = Arrangement.Center
        ) {
            Text(
                text = "06:00 PM"
            )
        }
    },
    text = {
        Column(
            modifier = Modifier
                .fillMaxHeight(), verticalArrangement = Arrangement.Center
        ) {
            Text("Your item text goes here")
        }
    },
)