Compose | UI组件(四) | Icon()，Image() 图标和图片组件

文章目录

[Icon 图标组件简介](#Icon 图标组件简介)
- [Icon 图标组件例子](#Icon 图标组件例子)
[Image 图片组件简介](#Image 图片组件简介)
- [Image 图片组件例子](#Image 图片组件例子)
- [colorFilter 实现不同效果](#colorFilter 实现不同效果)
总结

Icon 图标组件简介

显示一系列图标

kotlin 复制代码

@Composable
fun Icon(
    imageVector: ImageVector,                //矢量图,可以显示SVG格式的图标
    contentDescription: String?,             //服务无障碍功能,将文字转化成语言供视障听取内容
    modifier: Modifier = Modifier,           //修饰符
    tint: Color = LocalContentColor.current  //设置图标颜色
) 

@Composable
fun Icon(
    bitmap: ImageBitmap,                     //位图对象,可以显示JPG,PNG等格式的图标
    contentDescription: String?,             //服务无障碍功能,将文字转化成语言供视障听取内容
    modifier: Modifier = Modifier,           //修饰符
    tint: Color = LocalContentColor.current  //设置图标颜色
)

@Composable
fun Icon(
    painter: Painter,                        //代表自定义画笔,可以在Canvas上直接绘制图标
    contentDescription: String?,             //服务无障碍功能,将文字转化成语言供视障听取内容
    modifier: Modifier = Modifier,           //修饰符
    tint: Color = LocalContentColor.current  //设置图标颜色
)

Icon 图标组件例子

kotlin 复制代码

Icon(imageVector = Icons.Filled.Search, contentDescription = "矢量图")

Icon(bitmap = ImageBitmap.imageResource(id = R.mipmap.home), contentDescription = "图片资源")

Icon(painter = painterResource(id = R.mipmap.setting), contentDescription = "任意类型图片资源")

注：
Icons.Filled.Search 是 Material 包预置的矢量图标

Filled 是其中一种风格，还有Outlined ,Rounded ,Sharp ,Two tone 风格

Image 图片组件简介

Image组件用来显示一张图片，和Icom一样，也支持三种类型的图片设置

这里以Painter类型为例，展示列表解析

kotlin 复制代码

@Composable
fun Image(
    painter: Painter,                              //代表自定义画笔,可以在Canvas上直接绘制图标
    contentDescription: String?,                   //服务无障碍功能,将文字转化成语言供视障听取内容
    modifier: Modifier = Modifier,                 //修饰符
    alignment: Alignment = Alignment.Center,       //对齐方式
    contentScale: ContentScale = ContentScale.Fit, //指定图片伸缩样式
    alpha: Float = DefaultAlpha,                   //设置图片渐变
    colorFilter: ColorFilter? = null               //对绘制图片的每个像素颜色进行修改
)

Image 图片组件例子

kotlin 复制代码

Image(painter = painterResource(id = R.mipmap.setting), contentDescription = "任意类型图片资源")

colorFilter 实现不同效果

kotlin 复制代码

//混合指定颜色
tint(color: Color, blendMode: BlendMode = BlendMode.SrcIn)
//传入RGBA四通道的4x5的数字矩阵处理颜色变化
colorMatrix(colorMatrix: ColorMatrix)
//用来为图片应用简单的灯光效果
lighting(multiply: Color, add: Color)

总结

Icon表示图标组件，可以设置矢量图，位图对象，自定义画笔绘制图标。系统有预置各类型的矢量图
Image表示图片组件，用来显示图片，可以通过colorFilter设置不同效果图片