Jetpack Compose：如何在ListItem中实现图标及后置元素的垂直居中

Material3版本的ListItem原生已支持该能力，无需自定义布局，不需要放弃ListItem组件。

方案1：使用ListItem原生对齐属性（推荐） #

Material3 ListItem提供了专门的对齐配置参数：

• leadingContentAlign：控制前置图标/内容的对齐方式
• trailingContentAlign：控制后置元素的对齐方式
  默认值为LeadingContentAlign.Top，改为LeadingContentAlign.Center即可实现垂直居中，修改后的代码如下：

import androidx.compose.material3.ListItem
import androidx.compose.material3.LeadingContentAlign
import androidx.compose.material3.TrailingContentAlign

ListItem(
    modifier = Modifier.clickable(onClick = onClick),
    // 前置内容垂直居中
    leadingContentAlign = LeadingContentAlign.Center,
    // 后置内容垂直居中（如果有trailing元素的话添加）
    trailingContentAlign = TrailingContentAlign.Center,
    icon = {
        Text(
            text = dateUtil.formatTime(item.startTime),
            style = TextStyle(
                color = SnyDarkBlue,
                fontSize = 14.sp,
                fontFamily = oswaldFamily,
                fontWeight = FontWeight.Bold,
                letterSpacing = (-0.25).sp,
            ),
        )
    },
    // 其他ListItem配置：headlineText、supportingText、trailing等
)

不需要在外层套Box加fillMaxHeight，原生参数已经处理了对齐逻辑，代码更简洁。

方案2：Material2 ListItem适配方案 #

如果你使用的是Material2版本的ListItem，没有上述原生参数，可以通过给内容添加align修饰符实现：

ListItem(
    modifier = Modifier
        .clickable(onClick = onClick)
        .height(56.dp), // 固定行高或者用heightIn指定最小高度
    icon = {
        Text(
            modifier = Modifier.align(Alignment.CenterVertically),
            text = dateUtil.formatTime(item.startTime),
            style = TextStyle(
                color = SnyDarkBlue,
                fontSize = 14.sp,
                fontFamily = oswaldFamily,
                fontWeight = FontWeight.Bold,
                letterSpacing = (-0.25).sp,
            ),
        )
    },
    // 其他配置
)

方案3：自定义布局（仅当原生组件不满足特殊需求时使用） #

如果你的ListItem有非常定制化的样式需求，才需要用Row+Column组合实现，示例代码：

Row(
    modifier = Modifier
        .fillMaxWidth()
        .clickable(onClick = onClick)
        .padding(horizontal = 16.dp, vertical = 12.dp),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
    // 前置时间文本
    Text(
        text = dateUtil.formatTime(item.startTime),
        style = TextStyle(
            color = SnyDarkBlue,
            fontSize = 14.sp,
            fontFamily = oswaldFamily,
            fontWeight = FontWeight.Bold,
            letterSpacing = (-0.25).sp,
        ),
    )
    // 中间内容区域
    Column(
        modifier = Modifier.weight(1f)
    ) {
        Text(text = item.title, style = MaterialTheme.typography.titleMedium)
        Text(text = item.subtitle, style = MaterialTheme.typography.bodyMedium)
    }
    // 后置元素
    Icon(Icons.Default.ArrowForward, contentDescription = null)
}

内容的提问来源于stack exchange，提问作者Pablo Pantaleon