Jetpack Compose中如何填充按钮上矢量图的背景色？

异常效果如下：

问题根源 #

出现白色背景是三个问题叠加导致的：

• 包裹箭头图片的Surface组件设置了Modifier.fillMaxSize()，会占满按钮所有剩余布局空间，本身布局逻辑错误
• 本地矢量图加载用了面向网络图片的rememberImagePainter，对本地Vector资源的透明通道处理存在兼容问题
• 着色用的BlendMode.ColorBurn混合模式会把透明区域和下层背景做混色，容易透出异常白底，另外也不排除矢量图资源本身自带白色填充背景。

修复步骤 #

• 检查矢量图资源：打开res/drawable/ic_user_education_arrow.xml文件，确认<vector>根标签没有配置白色的android:fillColor属性，只保留箭头路径<path>节点的填充色即可，不要给整个矢量画布加背景。
• 删除多余的Surface嵌套：包裹Image的Surface层完全没有存在必要，直接删掉即可，避免多余布局层级导致的背景异常。
• 修正Image组件实现：本地drawable资源直接用Compose内置的painterResource()加载即可，不需要用第三方图片加载库；着色混合模式替换为BlendMode.SrcIn，这个模式只会给箭头的非透明区域上色，透明区域会完全透传按钮本身的背景色，不会出现白底；同时给箭头设置固定尺寸，避免无约束占满布局。

修正后的箭头部分代码 #

if (showButtonArrow) {
    Spacer(modifier = Modifier.width(16.dp))
    Image(
        painter = painterResource(id = R.drawable.ic_user_education_arrow),
        contentDescription = null,
        contentScale = ContentScale.Fit,
        modifier = Modifier.size(20.dp), // 尺寸和文字行高匹配即可，根据视觉效果调整
        colorFilter = ColorFilter.tint(
            color = MaterialTheme.colors.onSecondary,
            blendMode = BlendMode.SrcIn
        )
    )
}

额外提示：你代码里计算dpSize的逻辑存在单位转换错误，convertDpToPixels返回的是像素px值，直接传入Dp()构造函数会导致按钮尺寸显示异常，按钮高度直接写52.dp即可，不需要额外做像素转换。

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