Jetpack Compose 如何在ListItem中正确居中显示图标

Material 3 版本（推荐） #

直接使用ListItem内置的leadingIconAlignment参数即可实现图标垂直居中，无需自定义组件或手动调整内边距，修改后的代码如下：

Column {
    ListItem(
        // 新增这行配置图标对齐规则
        leadingIconAlignment = ListItemLeadingIconAlignment.Center,
        icon = {
            Icon(
                imageVector = Icons.Outlined.Delete,
                contentDescription = null
            )
        },
        secondaryText = { Text("secondaryText") },
        text = { Text("text") }
    )
    Divider()
}

设计逻辑说明 #

ListItem源码默认将图标区域设置为Alignment.TopStart是遵循Material Design规范的默认交互：当列表项存在多行文本（主文本+副文本甚至更多附加内容）时，顶部对齐的图标视觉层级更统一，不会出现大面积留白导致的视觉偏移。官方提供对齐参数就是为了满足不同场景的定制需求。

Material 2 兼容方案 #

如果使用的是未提供内置对齐参数的Material 2版本ListItem，可以在Icon外层套一个全屏高的容器实现居中，实现代码如下：

icon = {
    Box(modifier = Modifier.fillMaxHeight()) {
        Icon(
            imageVector = Icons.Outlined.Delete,
            contentDescription = null,
            modifier = Modifier.align(Alignment.Center)
        )
    }
}

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