Jetpack Compose新版Coil使用ImageRequest.Builder.target报错如何解决？

核心原因 #

Coil Compose 版本的rememberImagePainter内部会自行实现target逻辑用于更新画面渲染，因此框架强制禁止外部传入自定义target，避免内部逻辑冲突，这就是触发崩溃的原因。

推荐实现方案（无需额外发起网络请求） #

直接监听rememberImagePainter返回实例的加载状态，即可在加载成功时拿到Drawable：

val painter = rememberImagePainter(
    data = entry.imageUrl,
    builder = {
        crossfade(true)
        transformations(CircleCropTransformation())
    },
)

// 监听图片加载状态
LaunchedEffect(painter.state) {
    if (painter.state is ImagePainter.State.Success) {
        val successState = painter.state as ImagePainter.State.Success
        viewModel.calcDominantColor(successState.result.drawable) { color ->
            dominantColor = color
        }
    }
}

Image(
    modifier = Modifier
        .size(120.dp)
        .align(Alignment.CenterHorizontally),
    painter = painter,
    contentDescription = entry.pokemonName
)

备选方案：预加载获取Drawable #

如果需要在Image组件渲染前就提前拿到Drawable计算主色，可以单独通过ImageLoader发起请求，Coil的内存缓存会复用结果，不会产生重复请求：

val context = LocalContext.current
LaunchedEffect(entry.imageUrl) {
    val preloadRequest = ImageRequest.Builder(context)
        .data(entry.imageUrl)
        .transformations(CircleCropTransformation())
        .target { drawable ->
            viewModel.calcDominantColor(drawable) { color ->
                dominantColor = color
            }
        }
        .build()
    context.imageLoader.enqueue(preloadRequest)
}

Image(
    modifier = Modifier
        .size(120.dp)
        .align(Alignment.CenterHorizontally),
    painter = rememberImagePainter(
        data = entry.imageUrl,
        builder = {
            crossfade(true)
            transformations(CircleCropTransformation())
        },
    ),
    contentDescription = entry.pokemonName
)

内容的提问来源于stack exchange，提问作者Pierre Vieira