升级Android Studio后出现VectorDrawable图标显示异常问题

问题描述 #

升级Android Studio至Giraffe版本，同步更新依赖并从kapt迁移到ksp后，应用出现图标重组时样式变化的异常：相同的两个图标上下排列，重组后颜色显示不一致（第二张截图下方为正常效果）。使用的是未修改的Google Material Icons，仅作为VectorDrawable导入到res/drawable文件夹，Icon代码采用Material3默认实现：

Icon(painter = painterResource(id = icon),
        contentDescription = null,
        tint = iconColor
    )

相关Gradle依赖配置：

implementation 'androidx.compose.ui:ui:1.5.0'
implementation 'androidx.activity:activity-compose:1.7.2'
implementation 'androidx.compose.material3:material3:1.2.0-alpha05'
implementation 'androidx.compose.material:material:1.6.0-alpha03'
implementation 'androidx.compose.foundation:foundation-layout:1.6.0-alpha03'
androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.5.0'
debugImplementation 'androidx.compose.ui:ui-tooling:1.5.0'
debugImplementation 'androidx.compose.ui:ui-test-manifest:1.5.0'
ksp 'androidx.room:room-compiler:2.5.2'
compose_version = '1.5.1'
id 'com.android.application' version '8.1.0' apply false
id 'com.android.library' version '8.1.0' apply false
id 'org.jetbrains.kotlin.android' version '1.9.0' apply false
id 'com.google.devtools.ksp' version '1.9.0-1.0.13' apply false

已尝试的无效操作：

• 用Image组件替代Icon
• 在不同Android版本设备测试
• 重新下载Material Icons并导入
• 使用自定义图标
• 切换到Android Studio Hedgehog搭配Gradle 8.2

解决方向 #

1. 统一Compose依赖版本 #

当前配置中compose_version设为1.5.1，但部分依赖混用了1.5.0、1.6.0-alpha03等不同版本，版本不一致可能引发渲染逻辑冲突。将所有Compose相关依赖统一到同一个稳定版本，示例：

implementation 'androidx.compose.ui:ui:1.5.1'
implementation 'androidx.activity:activity-compose:1.7.2'
implementation 'androidx.compose.material3:material3:1.2.0' // 替换为稳定版，规避alpha版本潜在bug
implementation 'androidx.compose.material:material:1.5.1'
implementation 'androidx.compose.foundation:foundation-layout:1.5.1'
androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.5.1'
debugImplementation 'androidx.compose.ui:ui-tooling:1.5.1'
debugImplementation 'androidx.compose.ui:ui-test-manifest:1.5.1'

2. 清理VectorDrawable的默认 tint 配置 #

部分导入的Material Icons矢量图自带tint或tintMode属性，会和Compose的tint参数冲突。打开对应的VectorDrawable文件，移除根节点的tint、tintMode属性，确保颜色完全由Compose的tint参数控制。

3. 调整矢量图构建缓存策略 #

升级Gradle后新的缓存优化可能导致渲染异常，在模块的build.gradle的android块中添加以下配置：

android {
    // ...其他已有配置
    aaptOptions {
        noCompress "svg", "xml"
    }
}

4. 排查重组触发的参数变化 #

确认iconColor或icon参数是否在重组时发生意外变动。可以在Icon组件中添加日志，打印每次重组的参数值：

Icon(painter = painterResource(id = icon),
        contentDescription = null,
        tint = iconColor.also { Log.d("IconDebug", "Current tint: $it") }
    )

5. 清理构建缓存 #

升级IDE和依赖后，旧缓存可能残留异常数据：

• 点击Android Studio菜单栏File -> Invalidate Caches...，选择Invalidate and Restart
• 手动删除项目根目录的.gradle、build文件夹，以及模块下的build文件夹，重新构建项目

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