Jetpack Compose 之 Image

基本使用

Image 用来显示一张图片，Image有三个构造方法：

• 传入一个bitmap：ImageBitmap；

Image(bitmap = ImageBitmap.imageResource(id = R.mipmap.ic_launcher),
     contentDescription = "icon"
)

• 传入一个imageVector: ImageVector矢量图片；
• ​painter 图片资源，使用painterResource来获取drawable或者mipmap下的图片，contentDescription内容描述，在无障碍时使用，可以为空：

Image(
    painter = painterResource(R.mipmap.ic_launcher),
    contentDescription = "icon"
)

• ​ImageBitmap和ImageVector最终都是使用painter来处理显示图片的
  

alignment

在容器中的对齐方式，Alignment.**Center**默认时居中对齐，具体样式可以参Alignmen这个类；

Image(painter = painterResource(R.mipmap.ic_launcher),
     contentDescription = "icon",
     alignment = Alignment.CenterStart,
     modifier = Modifier.width(100.dp)
)

contentScale

contentScale可以设置图片的缩放模式，类似原来的ScaleType

Image(painter = painterResource(R.mipmap.ic_launcher),
      contentDescription = "icon",
      contentScale = ContentScale.Fit,
      modifier = Modifier.width(300.dp).height(200.dp)
)

• ContentScale.None

  • 保持原始图像比例
  • 图像不会缩小
  • 图片不会被放大
  • 如果图像的边小于视图边界，则它会有填充
  • 如果图像的边大于视图边界，将被裁剪
  • 效果：
    

• ContentScale.Inside

  • 保持原始图像比例
  • 图像可能会缩小，直到一切都在视图范围内
  • 图像不会被扩展。
  • 如果图像的比例与视图边界不同，则图像的边将有填充
  • 图像的边将不会被裁剪
  • 效果：
    

• ContentScale.Crop

  • 保持原始图像比例
  • 图像可能会缩小，直到完全覆盖所有视图边界
  • 可以扩展图像直到完全覆盖所有视图边界
  • 图像的两侧将没有填充
  • 如果图像的比例与视图边界不同，则图像的边将被裁剪
  • 效果：
    

• ContentScale.Fit

  • 保持原始图像比例
  • 图像可能会缩小，直到覆盖视图边界的一侧
  • 图像可能会被扩展，直到覆盖视图边界的一侧
  • 如果图像的比例与视图边界不同，则图像的边将有填充
  • 图像的边将不会被裁剪
  • 效果：
    

• ContentScale.FillBounds

  • 不要保持原始图像比例
  • 图像可能会缩小，直到覆盖所有视图边界
  • 可以扩展图像直到覆盖所有视图边界
  • 图像的两侧将没有填充
  • 图像的边将不会被裁剪
  • 效果：
    

• ContentScale.FillHeight

  • 保持原始图像比例
  • 图像可能会缩小，直到高度与视图边界匹配
  • 图像可能会被扩展，直到高度与视图边界匹配
  • 如果图像比例高于视图边界，图像的边将有填充
  • 如果图像比例比视图边界宽，则必须裁剪图像的边
  • 效果：
    

• ContentScale.FillWidth

  • 保持原始图像比例
  • 图像可能会缩小，直到宽度与视图边界匹配
  • 可以扩展图像直到宽度与视图边界匹配
  • 如果图像比例比视图边界宽，图像的边将有填充
  • 如果图像比例高于视图边界，则必须裁剪图像的边
  • 效果：
    

• 所有效果：
  
  
  

alpha

alpha参数可以设置图片的透明度

Image(painter = painterResource(R.mipmap.ic_launcher),
      contentDescription = "icon",
      alpha = 0.5f,
      modifier = Modifier.width(500.dp).height(200.dp)
)

colorFilter

colorFilter参数可以设置滤色，此处不详细展开来讲了

圆角、圆形图片

圆角、圆形图片需要借助到modifier来实现，modifier的_clip_方法，可以给所有View设置圆角：

Image(
      painter = painterResource(id = R.mipmap.ic_launcher),
      contentDescription = "",
      //圆角图片
      modifier = Modifier.clip(shape = RoundedCornerShape(50))
)

clip方法接收一个RoundedCornerShape类型的参数，RoundedCornerShape有7个构造方法，可以传入圆角百分比、dp、size等参数，可以分别设置4个角的圆角，详细可以查看RoundedCornerShape的源码。

加载网络图片

Jetpack Compose Image加载网络图片