如何让androidx.compose.material3.ListItem前后内容垂直居中并自适应高度？

完全可以实现你要的效果，具体调整方式如下：

1. 让图标垂直居中 #

Material3 的 ListItem 提供了专门参数控制 leading/trailing 内容的对齐：

• leadingContentAlignment：控制左侧图标容器内的对齐方式
• trailingContentAlignment：控制右侧图标容器内的对齐方式

直接将这两个参数设为 Alignment.CenterVertically，就能让图标始终保持垂直居中，不受文本内容多少的影响。

2. 自动收缩高度（无subtitle时） #

你现有代码已通过条件渲染控制 supportingText 的显示：当 item.subtitle 为空时不渲染该文本组件。ListItem 本身会根据内部内容自动计算高度，只要不给 ListItem 设置固定高度的 Modifier，就能自动收缩高度。

修改后的完整代码 #

import androidx.compose.foundation.layout.Alignment
import androidx.compose.material3.ListItem
import androidx.compose.material3.Text
import androidx.compose.ui.text.style.TextOverflow

ListItem(
    // 设置左侧图标垂直居中
    leadingContentAlignment = Alignment.CenterVertically,
    leadingContent = {
        LeadingIcon()
    },
    // 设置右侧图标垂直居中
    trailingContentAlignment = Alignment.CenterVertically,
    trailingContent = {
        TrailingIcon()
    },
    overlineText = {
        Text(
            text = item.text,
        )
    },
    headlineText = {
        Text(
            text = item.title,
            overflow = TextOverflow.Ellipsis,
            maxLines = 1,
        )
    },
    supportingText = {
        if (item.subtitle.isNotEmpty()) {
            Text(
                text = item.subtitle,
                overflow = TextOverflow.Ellipsis,
                maxLines = 1,
            )
        }
    }
)

额外说明 #

如果你的图标本身有固定尺寸或额外内边距，可微调图标的 Modifier（比如 Modifier.size(24.dp)）适配布局，但核心逻辑就是通过上述两个对齐参数控制图标位置，同时依赖 ListItem 的自适应高度特性。

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