Jetpack Compose 之 Image

597 阅读1分钟

属性

@Composable
fun Image(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null
)
@Composable
@NonRestartableComposable
fun Image(
    imageVector: ImageVector,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null
)
@Composable
@NonRestartableComposable
fun Image(
    bitmap: ImageBitmap,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null,
    filterQuality: FilterQuality = DefaultFilterQuality
)

基础用法

  1. 用法一
Image(
    painter = painterResource (id = R.drawable. ic_launcher_foreground ) ,
    contentDescription = null
)

通过 painterResource 引入资源图片

  1. 用法二
Image(imageVector = Icons.Default. Lock, contentDescription =null)

imageVector 矢量图

  1. 用法三
var bitmap: ImageBitmap? = null
with(LocalContext.current) {
bitmap = ImageBitmap.imageResource(id = R.drawable.ic_launcher_foreground)
}
bitmap?.let {
 Image(bitmap = it, contentDescription = null)
} 

通过ImageBitmap获取资源转换成bitmap加载

属性介绍

  • contentDescription 辅助功能服务用来描述此图像所代表的内容的文本
  • aligment对其方式

注意这里需要给定 Image 的宽高。

  • contentScale 图片的拉伸方式

有 Crop ,Fit ,FillHeight,FillWidth,Inside 等

Image(
    painter = painterResource(id = R.mipmap.addreamrk), contentDescription = null,
    contentScale = ContentScale.Fit
)
  • colorFilter 添加滤镜
Image(
    painter = painterResource(id = R.drawable.ic_launcher_foreground),
    contentDescription = null,
    contentScale = ContentScale.Fit,
    colorFilter = ColorFilter.tint(Color.Red, blendMode = BlendMode.Color)
)