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!
CodePudding user response:
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")
}
},
)