如何在jetpack compose的新线圈版本中使用`ImageRequest.Builder.target`？答案

【问题标题】：How to use `ImageRequest.Builder.target` in the new coil version in jetpack compose?如何在jetpack compose的新线圈版本中使用`ImageRequest.Builder.target`？
【发布时间】：2021-11-02 23:56:38
【问题描述】：

我的摇篮

// Coil
implementation "io.coil-kt:coil-compose:1.4.0"

问题描述

之前我将线圈与 Google 的 accompanist 一起使用，但是当我迁移到新版本的线圈 as the documentation suggests 时，我遇到了 target 方法的问题：

E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.example.pokedex, PID: 13502
    java.lang.IllegalArgumentException: request.target must be null.
        at coil.compose.ImagePainterKt.rememberImagePainter(ImagePainter.kt:94)
...

线圈实现

浏览ImagePainter（线圈类）的内部代码可以看到target方法由于某种原因确实需要为null：

@Composable
fun rememberImagePainter(
     request: ImageRequest,
     imageLoader: ImageLoader,
     onExecute: ExecuteCallback = ExecuteCallback.Default,
): ImagePainter {
     requireSupportedData(request.data)
     require(request.target == null) { "request.target must be null." }
...

我的代码

这是我在 jetpack compose 中的组件（图像组件在列内）：

Image(
    modifier = Modifier
        .size(120.dp)
        .align(Alignment.CenterHorizontally),
    painter = rememberImagePainter(
        data = entry.imageUrl,
        builder = {
            crossfade(true)
            target {
                viewModel.calcDominantColor(it) { color ->
                    dominantColor = color
                }
            }
            transformations(CircleCropTransformation())
        },
    ),
    contentDescription = entry.pokemonName
)

我需要目标方法根据它作为参数传递的drawable 对我的viewModel 执行内部操作。有人可以帮我吗？

【问题讨论】：

标签： android crash android-jetpack-compose coil

【解决方案1】：

这是预期的行为，因为 rememberImagePainter 在内部设置了 target。

您可以跟踪画家状态，等待Success 并从中获取drawable。也可以与LaunchedEffect 一起使用以防止重新计算：

val painter = rememberImagePainter(
    data = imageUrl,
    builder = {
        ...
    },
)
(painter.state as? ImagePainter.State.Success)
    ?.let { successState ->
        LaunchedEffect(Unit) {
            val drawable = successState.result.drawable
            viewModel.calcDominantColor(drawable) { color ->
                dominantColor = color
            }
        }
    }
Image(
    painter = painter,
    contentDescription = "...",
    modifier = Modifier
        ...
)

【讨论】：