Compose学习 -＞ Image()

最新推荐文章于 2024-08-28 08:13:54 发布

丶GuoZhiHao

最新推荐文章于 2024-08-28 08:13:54 发布

阅读量792

点赞数

分类专栏： Compose 文章标签：学习 composer kotlin android

本文链接：https://blog.csdn.net/qq_27400335/article/details/128297510

版权

Compose 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

基本使用：

通过资源id加载资源文件

Image(painter = painterResource(id = R.mipmap.test_01),
            contentDescription = "这是内容描述")

通过url地址加载网络图片

1、引入第三方库，并添加网络权限

implementation ("io.coil-kt:coil-compose:2.0.0-alpha03")

2、调用

 Image(
            rememberImagePainter(imageUrl),
            contentDescription = "这是内容描述",
            modifier = Modifier
                .size(150.dp, 150.dp)
        )

图片显示方式：contentScale

        Image(
            painter = painterResource(id = R.mipmap.test_02),
            contentDescription = "这是内容描述",
            modifier = Modifier
                .background(color = colorResource(id = R.color.purple_500))
                .size(180.dp, 180.dp),
            contentScale = ContentScale.Inside
        )

ContentScale.Fit（默认）：图片完全展示，并且高度或宽度铺满（宽高等比缩放）

ContentScale.Inside:图片完全展示，展示原图大小.

ContentScale.Corp:图片裁减展示，宽高铺满

ContentScale.FillHeight:高度铺满，宽度等比缩放，超出部分会被裁减

ContentScale.FillWidth:宽度铺满，高度等比缩放，超出部分会被裁减

ContentScale.None：不使用任何方式，原始图片宽高，超出控件部分将被裁减

ContentScale.FillBounds：宽高非等比缩放，图片铺满控件，可能会导致图片变形

裁减：

注意：如需设置margin时，必须在clip和size 裁减之前设置，在后面设置就设置成了padding了

圆形裁减：CircleShape

CircleShape 同 RoundedCornerShape(50) 也可以直接RoundedCornerShape(50)

        Image(painter = painterResource(id = R.mipmap.test_01),
            contentDescription = "这是内容描述",
        modifier = Modifier.clip(CircleShape))
        //CircleShape 同 RoundedCornerShape(50) 也可以直接传 RoundedCornerShape(50)

圆角裁减：RoundedCornerShape

        Image(
            painter = painterResource(id = R.mipmap.test_01),
            contentDescription = "这是内容描述",
            modifier = Modifier
                .padding(top = 10.dp)//注意：如需设置margin时，必须在clip和size 裁减之前设置，在后面设置就设置成了padding了
                .size(80.dp, 80.dp)
                .clip(RoundedCornerShape(8.dp))
        )

切角形状：CutCornerShape

        Image(
            painter = painterResource(id = R.mipmap.test_01),
            contentDescription = "这是内容描述",
            modifier = Modifier
                .padding(top = 10.dp)
                .size(80.dp, 80.dp)
                .clip(CutCornerShape(8.dp))//大小
                //.clip(CutCornerShape(50))//百分比
        )

透明图：

    Image(
        painter = painterResource(id = R.mipmap.test_02),
        contentDescription = "这是内容描述",
        modifier = Modifier
            .padding(top = 10.dp,end = 10.dp)
            .size(150.dp, 150.dp),
        alpha = 0.2f
    )