Jetpack Compose Image加载网络图片

在Jetpack Compose中加载网络图片，现在只能使用 Coil这个库！！！
且accompanist在几个月之前就弃用了Guild和 Coli库 弃用Guild和Coli！！！

1.引入Coli

implementation("io.coil-kt:coil:1.4.0")
implementation("io.coil-kt:coil-compose:1.4.0")

2.简单使用

Image(painter = rememberImagePainter(
      data = "http://pic-bucket.ws.126.net/photo/0003/2021-11-16/GOTKEOOU00AJ0003NOS.jpg"),
      contentDescription = null)

使用 rememberImagePainter函数，里面传入data为图片路径，就可以显示图片了
效果：

3. 占位图

Image(painter = rememberImagePainter(
        data = "http://pic-bucket.ws.126.net/photo/0003/2021-11-16/GOTKEOOU00AJ0003NOS.jpg",
        builder = {
            //占位图
            placeholder(R.mipmap.ic_launcher)
        }), contentDescription = null)

4. transformations

• 圆形图片

  Image(painter = rememberImagePainter(
                data = "http://pic-bucket.ws.126.net/photo/0003/2021-11-16/GOTKEOOU00AJ0003NOS.jpg",
                builder = {
                	  //圆形图片
                    transformations(CircleCropTransformation())
                },
           ),
            contentDescription = null)
  

  效果：
  

• 灰色

  Image(painter = rememberImagePainter(
                data = "http://pic-bucket.ws.126.net/photo/0003/2021-11-16/GOTKEOOU00AJ0003NOS.jpg",
                builder = {
                	  //灰色图片
                    transformations(GrayscaleTransformation())
                },
           ), contentDescription = null)
  

  效果：
  

• 圆角

  圆角效果当然也可以使用Modifier.clip()来实现

  Image(painter = rememberImagePainter(
                data = "http://pic-bucket.ws.126.net/photo/0003/2021-11-16/GOTKEOOU00AJ0003NOS.jpg",
                builder = {
                    //可以单独设置4个角的圆角度
                    transformations(RoundedCornersTransformation(50f,50f,30f,30f))
                },
           ), contentDescription = null)
  
  

  效果：
  

• 高斯模糊

  	val context = LocalContext.current
      Image(painter = rememberImagePainter(
                data = "http://pic-bucket.ws.126.net/photo/0003/2021-11-16/GOTKEOOU00AJ0003NOS.jpg",
                builder = {
                	  //设置高斯模糊
                	  //context 上下文对象
                	  //10f 模糊的半径，越大越模糊 ，默认10f
                	  //1f 图片缩放，默认1f
                    transformations(BlurTransformation(context,10f,1f))
                },
           ), contentDescription = null)
  

  效果：
  
  注：上面的效果可以组合起来使用

5.Transitions

• 淡入淡出

Image(painter = rememberImagePainter(
        data = "http://pic-bucket.ws.126.net/photo/0003/2021-11-16/GOTKEOOU00AJ0003NOS.jpg",
        builder = {
           //淡入淡出效果，可以传入true,默认动画持续时间是100毫秒
           //crossfade(true)
           //也可以直接传入动画时间
           crossfade(1000)
        },
    ), contentDescription = null)

效果：

6. 加载状态监听

val painter = rememberImagePainter(data = "http://pic-bucket.ws.126.net/photo/0003/2021-11-16/GOTKEOOU00AJ0003NOS.jpg")
    //图片加载状态
    when(painter.state){
        is ImagePainter.State.Success ->{
            Log.i("Coil","图片加载完成")
        }
        is ImagePainter.State.Loading ->{
            Log.i("Coil","图片加载中....")
        }
        is ImagePainter.State.Error ->{
            Log.i("Coil","图片加载错误")
        }
    }
    Image(painter = painter, contentDescription = null)

注意：截至文章发布时，图片加载状态还是实验性的API，还没有稳定

7.官方文档

coil官方文档