coil是什么

打开github，然后搜索coil，可以看到如下的介绍

Coil 是一个 Android 图片加载库，通过 Kotlin 协程的方式加载图片。

往下翻README，可以看到这么一段话

不得不说，coil真香

compose如何显示图片

在加载网络图片之前，还是得打打基础，看看普通的图片是如何显示的。

图片的格式

回顾一下知识点，图片的格式一般分为位图和矢量图

位图： android原生中，使用Bitmap来加载一个位图，位图由像素点构成，放大会失真。
矢量图： 矢量图是根据几何特性来绘制图形，放大后不会失真，android原生中一般借助于VectorDrawable或者三方库（Glide/coil）加载。

compose加载本地图片（Image）

在android原生中，一般使用ImageView显示图片，在compose中，使用Image来显示一张图片,如下：

@Composable
fun ShowLauncher() {
    Image(painter = painterResource(id = R.drawable.jin), contentDescription = "")
}
复制代码

歪个题，烬真帅

Image的参数解释

必须参数

painter：使用painterResource创建一个painter对象，创建的可能是ImageBitmap（conpose的位图类）/ ImageVector（compose的矢量图类），具体的类型由图片本身的格式决定。
contentDescription：用于无障碍模式

非必要参数

alignment: 定义Image在父布局的布局方式
contentScale：定义缩放规则
alpha：透明度
colorFilter：用于修改图片颜色

Image的size

android原生开发中，一般size可以进行三种设置，分别为具体的值 / wrap / match，在comppose中，对应如下：

具体的值 --> xxx.dip
wrap -- > 默认就是wrap
match -- > fillMaxSize / fillMaxHeight / fillMaxWidth

让我们来试试，放大图片到整个屏幕吧

@Composable
fun ShowLauncher() {
    Image(
        painter = painterResource(id = R.drawable.jin),
        contentDescription = "",
        modifier = Modifier.fillMaxWidth()
    )
}
复制代码

emmm...，有变化，但是似乎和我们充满高度的预期不太相符。此时，如果把contentScale的规则修改为 FillHeight,问题得到了解决 :

@Composable
fun ShowLauncher() {
    Image(
        painter = painterResource(id = R.drawable.jin),
        contentDescription = "",
        modifier = Modifier.fillMaxHeight(),
        contentScale = ContentScale.FillHeight
    )
}
复制代码

此处请欣赏烬的特写

加载网络图片

前面说到，coil已经支持了compose的图片加载，coil的支持方式一如既往的简洁，如下：

依赖引入

implementation("io.coil-kt:coil-compose:2.0.0")
复制代码

此处注意和原生需要引入的包时不一致的

使用

@Composable
fun ShowLauncher() {
    AsyncImage(
        model = "https://pic.iyingdi.com/post/content/2022/05/14/16325/ed50f6b7-8654-44ff-8762-7596c40928a7.png?imageMogr2/format/jpg|imageMogr2/quality/70",
        contentDescription = "")
}
复制代码

model: 图片地址
contentDescription：无障碍模式使用

至此，成功在compose中加载网络图片

coil - compose加载网络图片的最佳搭档