官方文档
查看官方文档 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.
}
