如何在 Jetpack Compose 中修改线圈图像占位符的颜色和大小

Question

我在 Jetpack Compose 中使用 Coil 1.3.2，我有一个像这样的 Image

Image(
    painter = rememberImagePainter(
        data = imageUrl,
        onExecute = { _, _ -> true },
        builder = {
            placeholder(R.drawable.icon)
        }
    ),
    contentScale = ContentScale.FillWidth,
    contentDescription = null,
    modifier = Modifier
        .fillMaxWidth()
        .aspectRatio(1f)
)

如何为我的占位符图标设置自定义颜色和大小？
我没有在 documentation

上找到任何示例

Answer 1

AFAIK 你不能直接使用资源来做到这一点，但你可以使用不同的 placeholder 重载获取 Drawable 对象。您可以尝试直接在该对象中执行您需要的操作

Answer 2

您可以使用 painter.state 查看图像是否仍在加载，并使用 Box 显示所需的占位符。注意要加载的Image必须在视图层级中，只定义rememberImagePainter不会开始加载

您可以使用 Image 或 Icon 作为占位符：如果您需要更改色调，第二个选项看起来更干净：

Box(contentAlignment = Alignment.Center) {
    val painter = rememberImagePainter(data = imageUrl)
    Image(
        painter = painter,
        contentScale = ContentScale.FillWidth,
        contentDescription = null,
        modifier = Modifier
            .fillMaxWidth()
            .aspectRatio(1f)
    )
    if (painter.state !is ImagePainter.State.Success) {
        Icon(
            painter = painterResource(id = R.drawable.icon),
            contentDescription = null,
            tint = Color.Blue,
            modifier = Modifier.size(100.dp)
        )
    }
}

我正在使用 contentAlignment = Alignment.Center 将静态尺寸占位符居中放置在 Box 中，您也可以将 Modifier.matchParentSize() 添加到占位符，这样它的尺寸就会与图片相同, 使用 fillMaxSize(part) 取 part of parent space, 等等

您也可以使用 AnimatedVisibility 而不是 if 来添加动画。

如何在 Jetpack Compose 中修改线圈图像占位符的颜色和大小

How to modify color and size for Coil image placeholder in Jetpack Compose

android

android-image

android-icons

android-jetpack-compose

coil