Jetpack Compose上的可变图像绘制器。

Question

我正在使用Jetpack Compose 1.0.0开发一个Android应用程序，我试图创建一个可为空的图像URL字符串的组合项，如果为空，它将使用painterResource显示占位符，如果不为空，则使用rememberImagePainter显示实际图像。

我之前的做法是：

@Composable
fun VariableImagePainterExample (
    imageURL: String?
) {
    val painter = rememberCoilPainter(
        null,
        previewPlaceholder = R.drawable.ic_placeholder_user,
        fadeIn = true,
    )

    LaunchedEffect(imageURL) {
        painter.request = imageURL
    }

    Image(painter = painter, contentDescription = null)
}

遗憾的是，rememberCoilPainter已经被废弃了，现在建议使用rememberImagePainter。然而，ImagePainter.request无法像上面那样更改。我接着尝试了以下代码：

@Composable
fun VariableImagePainterExample (
    imageURL: String?
) {
    val painter = remember {
        mutableStateOf<ImagePainter>(painterResource(id = R.drawable.ic_placeholder_user))
    }

    LaunchedEffect(imageURL) {
        painter.value = rememberImagePainter(imageURL)
    }

    Image(painter = painter.value, contentDescription = null)
}

但是这不起作用，因为 painterResource 和 rememberImagePainter 必须在@Composable函数上使用。我如何实现与之前相同的效果？

- Matheus Dias

Answer 1

在 Coil 2.0.0 中，AsyncImage 和 rememberAsyncImagePainter 都有一个 placeholder 参数，该参数接受任何其他的 painter。

AsyncImage(
    model = imageURL,
    placeholder = painterResource(R.drawable.placeholder),
    contentDescription = null,
)

在 Coil 1.4.0 中，您可以这样使用builder：

Image(
    rememberImagePainter(
        imageURL,
        builder = {
            placeholder(R.drawable.placeholder)
        }
    ),
    contentDescription = null,
)

- Phil Dukhov

---

由于 imageURL 可为空，因此在第一次组合时，该值将为 null，直到完成 http 请求，然后 URL 将成为字符串。我使用 LaunchedEffect 检查 imageURL 值何时更改，如果更改，则将 painter 替换为具有当前图像 URL 的 painter。 - Matheus Dias

@MatheusDias 这样做就可以了，这就是compose的工作原理。如果imageURL与上次合成时不同，图像视图将丢弃旧的并开始下载新的。而且，null也可以被传递给rememberImagePainter，没有问题，它只是一个空视图。此外，您还可以检查painter.state以查看当前状态。 - Phil Dukhov

我刚刚在这里检查了一下，它完美地按照需要工作。我原以为rememberImagePainter将从第一个参数开始是静态的，但非常感谢！ - Matheus Dias

Answer 2

对于 Coil 2.2.+ 版本 它使用 rememberAsyncImagePainter 替代 rememberImagePainter。

Image(painter = rememberAsyncImagePainter(model = imageUrl,
                imageLoader = ImageLoader.Builder(context).crossfade(true).build()),
                contentDescription = "images")

- Zaher88abd