使用 Coil 从 Jetpack Compose 中的 URL 加载 GIF

Question

我想在 Jetpack Compose 应用程序中显示来自 URL 的 GIF。据我所知，Coil 是目前唯一的方法。 似乎

ImageRequest.Builder(context).data()

方法接受

httpUrl

数据类型，但是，我还没有让它工作。 有可能吗？如果没有，还有其他办法吗？我是 Compose 新手，所以这可能有一个简单的解决方案。

我使用这个答案https://stackoverflow.com/questions/71138477/is-it-possible-to-display-animated-gif-in-jetpack作为图像生成器。我没有收到任何错误，但网格没有显示。我还尝试了 AsyncImage() 的一个非常简单的实现，但这也不起作用。

这是我的代码：

@Composable
fun GifGrid(
    modifier: Modifier = Modifier,
    gifList: List<GiphyItem>
) {
    val context = LocalContext.current
    val imageLoader = ImageLoader.Builder(context)
        .components {
            if (SDK_INT >= 28) {
                add(ImageDecoderDecoder.Factory())
            } else {
                add(GifDecoder.Factory())
            }
        }
        .build()

    LazyVerticalStaggeredGrid(
        columns = StaggeredGridCells.Fixed(3),
        modifier = modifier,
        verticalItemSpacing = 12.dp,
        horizontalArrangement = Arrangement.spacedBy(12.dp),
        contentPadding = PaddingValues(vertical = 8.dp),
        content = {
            items(gifList) { item ->
                Image(
                    painter = rememberAsyncImagePainter(
                        ImageRequest.Builder(context).data(item.url.toHttpUrl()).apply(block = {
                            size(Size.ORIGINAL)
                        }).build(), imageLoader = imageLoader
                    ),
                    contentDescription = null,
                    modifier = Modifier.clip(
                        RoundedCornerShape(6.dp),
                    )
                )
            }
        }
    )
}

GiphyItem 数据类：

data class GiphyItem(
    val id: String = "",
    val url: String = ""
)

Answer 1

我目前正在使用此代码来显示来自 URL 的图像：

val image = remember { myImageUrl.openStream().use { loadImageBitmap(it) } }
Image(image, "my image")

我还没有用动画 GIF 测试过它，所以尝试看看。