Jetpack Compose中移除IconButton黑色色调问题排查

核心原因 #

在Jetpack Compose中，IconButton作为Material设计组件，会自动为内部的Icon组件应用主题默认的contentColor（通常是OnSurface色值，对应深色/黑色）；同时Icon组件的tint参数默认值为LocalContentColor.current，这个tint会直接覆盖矢量Drawable本身设置的fillColor，所以你的自定义颜色矢量图会被渲染成黑色。

解决方法 #

提供三种常用的解决方式，按需选择：

1. 禁用Icon的tint功能
   直接给Icon设置tint = Color.Unspecified，让它使用矢量图本身的颜色：

IconButton(onClick = {}) {
    Icon(
        painter = painterResource(R.drawable.ic_menu),
        contentDescription = null,
        tint = Color.Unspecified
    )
}

2. 修改IconButton的contentColor
   通过IconButtonDefaults.iconButtonColors指定自定义的contentColor，这样Icon会继承这个颜色：

IconButton(
    onClick = {},
    colors = IconButtonDefaults.iconButtonColors(
        contentColor = Color(0xFF...), // 替换成你的@color/aqua对应的色值
    )
) {
    Icon(
        painter = painterResource(R.drawable.ic_menu),
        contentDescription = null
    )
}

3. 在矢量Drawable中禁用tint
   在ic_menu.xml的根vector节点添加android:tint="@null"，让Drawable本身忽略外部tint：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="20dp"
    android:height="4dp"
    android:viewportWidth="20"
    android:viewportHeight="4"
    android:tint="@null">
    <!-- 原有path内容不变 -->
</vector>

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