官方文档

查看官方文档 Coil

这个库可以做到加载图片功能，类似 Glide 和 其他图片库一样。而且支持Compose 和传统的代码

支持功能：Gif，SVG，还有video Frames 的某一帧。而且是官方推荐的库，关键配合kotlin可以使用协程优势。

Jetpack Compose 支持（其他支持参考文档）

• AsyncImage

AsyncImage 是可组合的，它异步执行图像请求并呈现结果。 它支持与标准 Image 可组合相同的参数，此外，它支持placeholder/error/fallback和 onLoading/onSuccess/onError 回调。

这是一个加载带有圆形裁剪、淡入淡出并设置占位符的图像的示例：

AsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data("https://example.com/image.jpg")
        .crossfade(true)
        .build(),
    placeholder = painterResource(R.drawable.placeholder),
    contentDescription = stringResource(R.string.description),
    contentScale = ContentScale.Crop,
    modifier = Modifier.clip(CircleShape)
)

• SubcomposeAsyncImage

SubcomposeAsyncImage 是 AsyncImage 的变体，它使用 subcomposition 为 AsyncImagePainter 的状态提供插槽 API，而不是使用 Painters。

SubcomposeAsyncImage(
    model = "https://example.com/image.jpg",
    loading = {
        CircularProgressIndicator()
    },
    contentDescription = stringResource(R.string.description)
)

此外，您可以使用其 content 参数和渲染当前状态的 SubcomposeAsyncImageContent 拥有更复杂的逻辑：

SubcomposeAsyncImage(
    model = "https://example.com/image.jpg",
    contentDescription = stringResource(R.string.description)
) {
    val state = painter.state
    if (state is AsyncImagePainter.State.Loading || state is AsyncImagePainter.State.Error) {
        CircularProgressIndicator()
    } else {
        SubcomposeAsyncImageContent()
    }
}

重要关注的一个提示：

子组合的性能不如常规组合，因此这种组合可能不适合对高性能至关重要的 UI 部分
如果您使用 ImageRequest.Builder.size 为 ImageRequest 设置自定义大小（例如 size(Size.ORIGINAL)），SubcomposeAsyncImage 将不会使用子组合，因为它不需要解析可组合的约束。

• AsyncImagePainter

在内部，AsyncImage 和 SubcomposeAsyncImage 使用 AsyncImagePainter 来加载模型。 如果您需要 Painter 并且不能使用 AsyncImage，您可以使用 rememberAsyncImagePainter 加载图像：

rememberAsyncImagePainter is a lower-level API that may not behave as expected in all cases. Read the method's documentation for more information.

如果在呈现 AsyncImagePainter 的图像上设置自定义 ContentScale，则还应该在 rememberAsyncImagePainter 中设置它。 有必要确定加载图像的正确尺寸。

• Observing AsyncImagePainter.state

图像请求需要一个大小来确定输出图像的尺寸。 默认情况下，AsyncImage 和 AsyncImagePainter 在合成发生后，但在绘制第一帧之前解析请求的大小。 它以这种方式解决以最大限度地提高性能。 这意味着 AsyncImagePainter.state 将为第一个合成加载 - 即使图像存在于内存缓存中并且它将在第一帧中绘制。

如果您需要 AsyncImagePainter.state 在第一次合成期间保持最新，请使用 SubcomposeAsyncImage 或使用 ImageRequest.Builder.size 为图像请求设置自定义大小。 例如，在此示例中，AsyncImagePainter.state 在第一次合成期间将始终是最新的：

val painter = rememberAsyncImagePainter(
    model = ImageRequest.Builder(LocalContext.current)
        .data("https://example.com/image.jpg")
        .size(Size.ORIGINAL) // Set the target size to load the image at.
        .build()
)

if (painter.state is AsyncImagePainter.State.Success) {
    // This will be executed during the first composition if the image is in the memory cache.
}

Image(
    painter = painter,
    contentDescription = stringResource(R.string.description)
)

• Transitions

您可以使用 ImageRequest.Builder.crossfade 启用内置的交叉淡入淡出过渡：

AsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data("https://example.com/image.jpg")
        .crossfade(true)
        .build(),
    contentDescription = null
)

高级使用

自定义转换不适用于 AsyncImage、SubcomposeAsyncImage 或 rememberAsyncImagePainter，因为它们需要 View 引用。 由于特殊的内部支持，CrossfadeTransition 有效。

也就是说，可以通过观察 AsyncImagePainter 的状态在 Compose 中创建自定义转换：

val painter = rememberAsyncImagePainter("https://example.com/image.jpg")

val state = painter.state
if (state is AsyncImagePainter.State.Success && state.dataSource != DataSource.MEMORY_CACHE) {
    // Perform the transition animation.
}

Image(
    painter = painter,
    contentDescription = stringResource(R.string.description)
)

注意

为了可测试，我试了不同版本
可能需要state.result.dataSource != DataSource.MEMORY_CACHE 这么写，不是官方文档错误，就是版本问题

if (state is AsyncImagePainter.State.Success && state.result.dataSource != DataSource.MEMORY_CACHE) {
        // Perform the transition animation.
    }