Jetpack Compose中如何使用矢量drawable资源创建彩色Icon

这是Jetpack Compose中Icon组件的默认行为导致的：Icon默认会对加载的所有矢量资源做tint着色，强制把资源内所有路径的颜色覆盖为LocalContentColor.current。Material组件体系下，Button的默认内容色为白色，因此无论你在矢量XML中给path配置什么fillColor，在运行环境、Compose Preview中都会被统一染成白色。Android Studio的静态资源预览面板不会走Compose的tint逻辑，所以你在资源查看界面能看到正常显示的彩色图标。
你之前尝试修改背景path的fillColor后图标依然全白，也是同一个原因：tint是全局作用在整个矢量资源上的，不会区分内部不同路径的颜色，只要不关闭这个默认着色逻辑，修改XML内的颜色值不会产生任何效果。

1. 快速修复：关闭Icon默认着色 #

给Icon组件传入参数 tint = Color.Unspecified，告知组件不要对加载的资源做统一着色，直接使用矢量XML中定义的原始颜色即可：

Button(onClick = { /*TODO*/ }) {
    Icon(
        painter = painterResource(id = R.drawable.ic_google_logo_filled),
        contentDescription = "Google logo",
        tint = Color.Unspecified
    )
    Text(
        text = "Sign In With Google",
        modifier = Modifier.padding(start = 8.dp)
    )
}

2. 适配双按钮样式的优化方案 #

不建议在矢量XML中硬编码白色背景层，这种写法会导致图标无法灵活适配不同背景的按钮样式，推荐调整实现逻辑：

• 首先打开矢量XML文件，删除第一个绘制24dp全白矩形的<path>节点，只保留彩色G标的路径
• 使用蓝色背景按钮时，直接用上述关闭tint的写法，彩色G标会直接显示在蓝色按钮背景上，符合官方按钮规范
• 使用白色背景按钮时，单独给图标外层添加和图标尺寸匹配的白色承载容器即可，不需要修改矢量资源本身，实现一套资源适配两种场景：

Button(
    onClick = { /*TODO*/ },
    colors = ButtonDefaults.buttonColors(containerColor = Color.White)
) {
    Box(
        modifier = Modifier
            .size(24.dp)
            .background(Color.White, CircleShape)
            .padding(2.dp),
        contentAlignment = Alignment.Center
    ) {
        Icon(
            painter = painterResource(id = R.drawable.ic_google_logo_filled),
            contentDescription = "Google logo",
            tint = Color.Unspecified
        )
    }
    Text(
        text = "Sign In With Google",
        modifier = Modifier.padding(start = 8.dp),
        color = Color.Black
    )
}

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