Compose 中 Image

Image 介绍

public fun Image(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = COMPILED_CODE,
    alignment: Alignment = COMPILED_CODE,
    contentScale: ContentScale = COMPILED_CODE,
    alpha: Float = COMPILED_CODE,
    colorFilter: ColorFilter? = COMPILED_CODE
): Unit

• painter 需要传入的图片，可以是矢量图，可以是位图 ，常用方法就是painterResource(id = R.mipmap.xxx)
• contentDescription 图片的描述，如果不是重要的图片展示可以为null
• modifier用于调整布局算法或绘制装饰内容（例如背景）的修饰符，下文会表述一些image的modifier使用
• alignment 可选的对齐参数，用于将Painter放置在由宽度和高度定义的给定边界内。默认居中，这个属性比较基础，本文不会过多描述
• contentScale 可选的缩放参数，用于确定当边界的大小与Painter的固有大小不同时要使用的纵横比缩放，默认均匀缩放图片，并保持宽高比。如果内容小于指定大小，系统会放大图片以适应边界。
• alpha在屏幕上渲染时可选不透明度，默认情况下，图片将完全不透明
• colorFilter在屏幕上渲染时应用于Painter的可选colorFilter，可用于更改图片中各个像素的输出。以达到滤镜的效果

ContentScale 属性介绍

• 默认（ContentScale.Fit）
  均匀缩放图片，并保持宽高比。如果内容小于指定大小，系统会放大图片以适应边界。（图片会缩小，然后全部展示，但是宽高比不会不变，如果宽高比不对应，则显示有背景边框）
• 将图片居中裁剪到可用空间（ContentScale.Crop）
  图片将整个背景填充满，无论横向还是纵向，看起来饱满，但是有裁剪。
• 缩放图片，保持宽高不变，使边界与目标边界匹配（ContentScale.FillHeight\ContentScale.FillWidth）
  缩放图片，保持宽高不变，使边界与目标边界匹配，如果控件尺寸不匹配，图片有裁剪。
• 以非均匀方式垂直和水平缩放内容，以填充目标边界。（ContentScale.FillBounds）
  不裁剪图片并将图片拉伸至填充满整个Image控件，这样既可以完全展示图片，有让其填充满控件，缺点是图片容易失真，比例拉伸，不美观。
• 缩放来源图片，使宽高保持在目标边界内。（ContentScale.Inside）
  缩放来源图片，使宽高保持在目标边界内。如果来源图片在两个维度上都小于或等于目标，内容始终包含在边界内。感觉与Fit一样，但区别在于，如果内容小于边界，则不会应用缩放。
• 不缩放。（ContentScale.None）
  原图片，不做任何调整，缩放、剪切。

Modifier 属性介绍

• Modifier.clip()
  这个属性，主要将图片裁剪成圆形或者圆角，与背景裁剪成圆角和圆形的大概相似。

Modifier.background(
                colorResource(R.color.color_f5f5f5),
                shape = RoundedCornerShape(16.dp, 16.dp, 0.dp, 0.dp)
  )

在Image中：

Modifier
        .size(150.dp)
        //加了边框
        .border(BorderStroke(1.dp, Black))
        .background(Yellow)
        .clip( RoundedCornerShape(16.dp, 16.dp, 0.dp, 0.dp))

注： 在进行圆形裁剪时，要注意contentScale的属性，不然可能不生效。

• Modifier.border()
  添加边框

• Modifier.aspectRatio(4f/3f)
  图片转化自定义宽高比（4:3）

• Modifier.blur()
  模糊效果

Modifier.blur(
            radiusX = 10.dp,
            radiusY = 10.dp,
            edgeTreatment = BlurredEdgeTreatment(RoundedCornerShape(8.dp))
        )

ColorFilter 属性介绍

基本用法

Image(
    painter = painterResource(id = R.drawable.apple),
    contentDescription = stringResource(id = R.string.apple_content_description),
    colorFilter = ColorFilter.tint(Color.Green, blendMode = BlendMode.Darken)
)

其中其实主要就是使用ColorFilter.tint() 方法。

@Stable
        fun tint(color: Color, blendMode: BlendMode = BlendMode.SrcIn): ColorFilter =
            actualTintColorFilter(color, blendMode)

可以看到需要我们传入一个Color颜色，然后传入一个BlendMode，默认是BlendMode.SrcIn，我们通过官方文档可以看到有如下表格那么多种模式：

加载网络图片

添加依赖

implementation "io.coil-kt:coil-compose:2.1.0"

使用

@Composable
fun NetworkImage(){
    val url = "https://xxxxx.png"
    Column(
        Modifier.padding(top = 50.dp)
    ){
        AsyncImage(
            model = url,
            contentDescription = null
        )

        val modelBuilder = ImageRequest.Builder(LocalContext.current)
            .data(url ?: "")
            .crossfade(false)
            .allowHardware(true)
            .build()

        Image(
            painter = rememberAsyncImagePainter(
                model = modelBuilder
            ),
            contentDescription = "头像",
        )
    }
}

两种通过url网络加载图片。
具体可参考【Coil 对 Compose 的支持】