喷气背包组成。 ListItem 中的中心图标

Question

如何使 ListItem 中的图标正确居中？

Column {
    ListItem(
        icon = {
            Icon(
                imageVector = Icons.Outlined.Delete,
                contentDescription = null
            )
        },
        secondaryText = { Text("secondaryText") },
        text = { Text("text") }
    )
    Divider()
}

给出这个结果

ListItem 实现使用显式 Box(contentAlignment = Alignment.TopStart) 来放置图标。嗯……为什么？

我当然可以使用填充或创建自定义 ListItem，但必须有一个标准解决方案。

Answer 1

您可以将 Modifier.size(40.dp) 添加到 Icon

类似于：

    ListItem(
        text = { Text("Two line list item with 40x40 icon") },
        secondaryText = { Text("Secondary text") },
        icon = {
            Icon(
                Icons.Filled.Favorite,
                contentDescription = null,
                modifier = Modifier.size(40.dp)
            )
        }
    )

ListItem 在 material guidelines 之后：

喷气背包组成。 ListItem 中的中心图标

Jetpack compose. Center icon in ListItem

android

android-jetpack

android-jetpack-compose