文章目录
- Icon 图标组件简介
- Icon 图标组件例子
- Image 图片组件简介
- Image 图片组件例子
- colorFilter 实现不同效果
- 总结
Icon 图标组件简介
显示一系列图标
@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 图标组件例子
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类型为例,展示列表解析
@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 图片组件例子
Image(painter = painterResource(id = R.mipmap.setting), contentDescription = "任意类型图片资源")
colorFilter 实现不同效果
//混合指定颜色
tint(color: Color, blendMode: BlendMode = BlendMode.SrcIn)
//传入RGBA四通道的4x5的数字矩阵处理颜色变化
colorMatrix(colorMatrix: ColorMatrix)
//用来为图片应用简单的灯光效果
lighting(multiply: Color, add: Color)
总结
- Icon表示图标组件,可以设置矢量图,位图对象,自定义画笔绘制图标。系统有预置各类型的矢量图
- Image表示图片组件,用来显示图片,可以通过colorFilter设置不同效果图片