使用 Coil Compose 加载本地可绘制资源

Question

我最近从 Accompanist 的 ImagePainter 迁移到了 Coil，以下是我更新后的相关代码。

val painter = rememberImagePainter(DRAWABLE_RESOURCE_ID)

when (painter.state) {
    is ImagePainter.State.Empty -> Timber.w("Empty")
    is ImagePainter.State.Loading -> {
        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier.wrapContentSize()
        ) {
            CircularProgressIndicator()
        }
    }
    is ImagePainter.State.Success -> {
        Image(
            painter = painter,
            contentDescription = null,
            contentScale = ContentScale.Fit,
            modifier = Modifier
                .padding(8.dp)
                .size(84.dp)
                .clip(RoundedCornerShape(corner = CornerSize(16.dp)))
        )
    }
    is ImagePainter.State.Error -> Timber.e("Error")
}

现在这些图像不会渲染，painter.state 始终为 Empty。我的旧版 Accompanist 实现在代码的这一点上显示了图像。如果我使用 Compose 提供的标准 painterResource(resId)，它也可以正常工作。

我错过了什么来执行 Coil 的新 painter 通过其状态？

- es0329

Answer 1

您可以使用可绘制的资源ID作为线圈的AsyncImage组合的模型。

AsyncImage(
    model = R.drawable.bg_gradient,
    contentDescription = "Gradient background",
)

在可组合项之间存在显著的性能差异-图像和AsyncImage。因此，有时Coil的AsyncImage加载非常方便。

- Roshan

Answer 2

您不需要使用coil来加载本地资源。您可以使用系统的painterResource：

Image(
    painter = painterResource(id = R.drawable.test),
    contentDescription = null,
    contentScale = ContentScale.Fit,
    modifier = Modifier
        .padding(8.dp)
        .size(84.dp)
        .clip(RoundedCornerShape(corner = CornerSize(16.dp)))
)

---

如果你想用它来取消图片加载：自从从accompanist转移到coil后，绘图器不会开始加载，除非Image在视图树层次结构中。因此，您可以将Image移动到带有while的Box中：

Box(contentAlignment = Alignment.Center) {
    val painter = rememberImagePainter(R.drawable.test)
    Image(
        painter = painter,
        contentDescription = null,
        contentScale = ContentScale.Fit,
        modifier = Modifier
            .padding(8.dp)
            .size(84.dp)
            .clip(RoundedCornerShape(corner = CornerSize(16.dp)))
    )
    when (painter.state) {
        is ImagePainter.State.Empty -> Timber.w("Empty")
        is ImagePainter.State.Loading -> {
            Box(
                contentAlignment = Alignment.Center,
                modifier = Modifier.wrapContentSize()
            ) {
                CircularProgressIndicator()
            }
        }
        is ImagePainter.State.Success -> {

        }
        is ImagePainter.State.Error -> Timber.e("Error")
    }
}

此外，如果您没有提供足够的尺寸修改器，它可能无法开始加载（这不是您的情况，只是供您知道）。有关更多信息，请查看此答案。

- Phil Dukhov

Answer 3

如@Philip Dukhov所建议的那样，您不需要使用Coil来加载本地资源。

如果您想使用它，可以简化您的代码：

val painter = rememberImagePainter(R.drawable.xxx)
val state = painter.state
Box(
    contentAlignment = Alignment.Center,
    modifier = Modifier.wrapContentSize()
) {
    AnimatedVisibility(visible = (state is ImagePainter.State.Loading)) {
        CircularProgressIndicator()
    }
    Image(
        painter = painter,
        contentDescription = null,
        modifier = Modifier.size(128.dp)
    )
}

- Gabriele Mariotti

---

rememberImagePainter已被弃用，建议使用AsyncImagePainter。 - undefined

Answer 4

val context = LocalContext.current
val imageLoader = ImageLoader(context)

val request = ImageRequest.Builder(context)
        .data(thumbnailUrl)
        .build()

val painter = rememberImagePainter(
        request = request,
        imageLoader = imageLoader
    )

val state = painter.state

Image(
  painter = painter,
  contentDescription = "thumbnail image",
  modifier = Modifier
            .fillMaxSize()
            .placeholder(
                visible = state is ImagePainter.State.Loading,
                color = PlaceholderDefaults.color(
                    backgroundColor = SMXTheme.colors.shimmer.copy(0.1f),
                ),
                highlight = PlaceholderHighlight.shimmer(),
            ),
        contentScale = ContentScale.Crop
    )

- svg