Jetpack Compose中如何修改Coil图片加载占位图的颜色和尺寸

实现核心逻辑 #

不要直接向placeholder()方法传入drawable资源ID，先对目标drawable完成着色、尺寸调整后，再将加工完成的Drawable实例传入即可。

完整代码示例 #

// 需要导入的相关依赖（如果缺失的话）
import androidx.core.content.ContextCompat
import androidx.compose.ui.unit.dp
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalDensity

Image(
    painter = rememberImagePainter(
        data = imageUrl,
        onExecute = { _, _ -> true },
        builder = {
            val context = LocalContext.current
            // 转换dp为像素，适配不同设备屏幕密度
            val targetSize = with(LocalDensity.current) { 120.dp.toPx().toInt() }
            
            val customPlaceholder = ContextCompat.getDrawable(context, R.drawable.icon)?.apply {
                // 自定义着色，可替换为你需要的任意颜色
                setTint(Color(0xFF2196F3).toArgb())
                // 自定义显示尺寸，参数依次为左、上、右、下坐标
                setBounds(0, 0, targetSize, targetSize)
            }
            
            placeholder(customPlaceholder)
            // 可选：单独设置占位图的缩放规则，不跟随主图contentScale
            // placeholderScale(Scale.FIT)
        }
    ),
    contentScale = ContentScale.FillWidth,
    contentDescription = null,
    modifier = Modifier
        .fillMaxWidth()
        .aspectRatio(1f)
)

补充说明 #

• 如果你的占位图是矢量图标，着色效果最佳；如果是位图，仅支持对带有透明通道的图标区域进行着色。
• 如果你不需要单独调整占位图尺寸，仅需着色，也可以直接在xml的矢量drawable文件中提前配置好tint属性，直接传入资源ID即可生效。
• 占位图的默认缩放规则会跟随主图的contentScale配置，如果需要单独调整，可以通过placeholderScale()方法指定独立的缩放类型。

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