「这是我参与2022首次更文挑战的第16天，活动详情查看：2022首次更文挑战」。

Jetpack Compose系列(5) – 图片组件

JetpackCandroid平板电脑价格ompose中的常用图片组件有两个：Icon和Image。从命名上就不难看出这两个组件在内容呈现上就是负责图形和图片相关。

需要gradle是什么意思说android平板电脑价格明的是，Compose获取资源方式有四种：

文本-> stringResource(R.string.helgradle是什么lo_world)

颜色-> colorResougradle和maven的区别rce(R.col矩阵的迹or.black)

尺寸-> dandroid/yunosimensionResource(R.dimen.padding)

图片-> painterResource(R.drawable.head_icon)

而Icon和android的drawable类Image毫android下载无疑问都是图片资源。

Icon

Icon共有三种构造函数：

fun Icon(
    bitmap: ImageBitmap,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
) 
fun Icon(
    imageVector: ImageVector,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
)
fun Icon(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
) 

三种gradle和maven的区别函数仅gradle和maven的区别第一个参数类型不一致，gradle下载但均是Icon的实际内容。其他三个参数，分别为：

contentDescription:内容含义描述，用于 无障碍服务(考虑到一些视觉障碍的人使用,所以有个这个属性,会使用TTS语音播放矩阵的迹将contentDescription属性读出来,告矩阵的迹知用户此gradle按钮的作用)，如果这个Icon可以被触发，就需要解释它的含义矩阵相似，如果仅仅是装饰性质，可以忽略掉。

modifier:修饰器。

tint:着色器，可以直接修改Icandroid平板电脑价格on实质内容的颜色。(跟View矩阵的秩体系的一个道理)

另外三个有区别的参数即：

ImageBitmap： 位图。

Paint矩阵的乘法运算er： 抽象类，表示可被绘制的内容，类似于Android中的Drawable。

ImageVector： 矢量图。

Candroid手机ompose内置了几十个常用的图标，Icons里面定了5gradle是什么种Materia矩阵乘法lDesign类型风格Outlined、Filled、Sharp、TwoTone、Rounded,可以根据自矩阵的迹己的需要选择不同的类型矩阵的逆。

下例我们引用官方提供的矢量图资源来显示五种类型Icon：

Row {
    Icon(Icons.Outlined.CheckCircle, contentDescription = null, tint = Color.Red)
    Icon(Icons.Filled.CheckCircle, contentDescription = null, tint = Color.Black)
    Icon(Icons.Sharp.CheckCircle, contentDescription = null, tint = Color.Blue)
    Icon(Icons.TwoTone.CheckCircle, contentDescription = null, tint = Color.Green)
    Icon(Icons.Rounded.CheckCircle, contentDescription = null, tint = Color.Red)
}

对应效果为：

不难看出，这五种风格分别对应：

Filled默认类型，图形是内容填充风格。

Outlined轮廓型，只有描边，gradle下载不做填充。

R矩阵重启ounded圆形，例如圆形启动图标。

TwoTone双调，不确定翻译doc是否写错，和Sharp完全一致。

Sharp例如直角图标。

这里需要提一下，代码中的图片资源文件是Compose内置的，除此之外默认常用的多达40+个，如果想用其他内置图标，可以在gradle中通过导入materi矩阵的迹al-icons-extended依赖来使用：

dependencies {
    
    implementation "androidx.compose.material:material-icons-extended:$compose_version"
}

但是全套图标会导致打包后的apk文件会过大，所以官方推荐使用导入图标文件的方android电子市场法,详情可参考官方文档。

Paintandroid是什么系统er

我们拿Painter写个简单的Icon：

Icon(painter = painterResource(id = R.mipmap.ic_launcher), null)

一运行，发现：

居然报错了！赶紧看下原因：

错误原因写得很清楚了，这里painter对象只只支持.png或.jpg格式图片，而原图片是.webp格式。

这回我们换个图片，如下：

Icon(painter = painterResource(id = R.mipmap.icon_text), null)

运行发现：

显示成黑色了，原图不是这样的啊。

这里需要说明的是，tint着色器默认模式是AmbientContentColor.current，我们要显示出原图色彩需要更换模式，设置tint的属性设置为Color.Unspecified。

代码可以修改为：

Icon(painter = painterResource(id = R.mipmap.icon_text), null, tint = Color.Unspecified)

对应的Icon也正常显示了：

Image

按照惯例，我们先看引用Image控件需要的参数。

不难看出Image参数与Icon的基础参数几乎一致。使用方式事实上也一致android平板电脑价格，这里主要说下其他区别参数：

alignment：对矩阵重启齐方向

Image使用alignment的前提是设置了宽高。alignment对应的取值如下：

看词矩阵游戏义就能猜到gradle是什么具体位置，这里不做赘述。

contentScale：缩放设置

其效果类似View体系中的ImageViewscaleType属性，具体缩放值在ContentScale中：

其中这一项默认值为Conandroid下载安装tentScale.Fit。其余各参数矩阵计算器解释如下：

ContentScale.Crop：裁剪；

ContentScale.FillBounds：拉伸图片宽高填满形状；

ContentScale.FillHeight：拉伸图片高度填满高度；

ContentScagradlele.FillWidth：拉伸图片宽度填满宽度；

ContentScale.Fit：均匀缩放源(保持源的长宽比)，以便源的两个维度(宽度和高度)都等于或小于目标的相应维度；

ContentScale.Inside：如果源大于gradle安装与配置目标，则缩放源以保持长宽比在目标边界内。如果源在两个维度中都小于或等于目标，则此行为类似于None；

ContentScale.None：不缩放。

alpha透明度

数值范围为0f-1f之间，默认是1f，矩阵计算器这没什么好讲的。

colorFilter：着色效果

将某种颜色应用到图片上，即使用颜色对图片进行混合加工，有如下三种设置方法：

ColorFilter.tint(Color, BlendMode)：修改着色效果；

ColorFilter.lighting(Color,AddColor)：在着色图片上添加AddColor颜色；

ColorFilter.colorMat矩阵乘法rix(colorMatandroid下载安装rix)：修改着android是什么手机牌子色矩阵。

一般来说，都是用在图片不变的基础上修改图片颜色。

Row {
    Image(modifier = Modifier
        .size(60.dp, 45.dp),
        painter = painterResource(id = R.drawable.icon_text),
        contentDescription = null,
        alpha = 1f,
        colorFilter = null
    )
    Image(modifier = Modifier
        .size(60.dp, 45.dp),
        painter = painterResource(id = R.drawable.icon_text),
        contentDescription = null,
        alpha = 1f,
        colorFilter = ColorFilter.tint(color = Color.Blue, BlendMode.SrcAtop)
    )
    Image(modifier = Modifier
        .size(60.dp, 45.dp),
        painter = painterResource(id = R.drawable.icon_text),
        contentDescription = null,
        alpha = 1f,
        colorFilter = ColorFilter.lighting(multiply = Color.Blue,add = Color.Black)
    )
}

对应的效果为：

colorMatrix涉及到色彩矩阵，使用场景也较少，这里矩阵的迹不再赘述。