鸿蒙Harmony（四）ArkUI---基础组件：Image

2023-12-27 13:34:03

Image组件

1、设置图片

Image(src: string | PixelMap | Resource)

1.1 string格式

通常用来夹在网络图片，加载网络图片需要在module.json5中添加网络访问权限：“ohos.permission.INTERNET”
权限申请文档（安全中的访问权限）： https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/accesstoken-guidelines-0000001493744016-V2
在这里插入图片描述
在这里插入图片描述

1.2 PixelMap格式，可以加载像素图，常在图片编辑中使用

1.3 Resource格式，加载本地图片，推荐使用

 Image($r('app.media.baobao'))
 Image($rawfile('baobao.jpg'))
          .objectFit(ImageFit.Contain)

在这里插入图片描述

2.部分属性

     Image($rawfile('baobao.jpg'))
          .width(300)
          .borderRadius(30) //圆角
          .interpolation(ImageInterpolation.High)// 图片插值器（某些图片放大会出现锯齿，插值器可以用来弥补锯齿）
          .objectFit(ImageFit.Contain)

在这里插入图片描述

3. Image的objectFit

图片填充模式通过设置objectFit，ImageFit包含以下几种类型：

Contain：保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
在这里插入图片描述

Cover（默认值）：保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
在这里插入图片描述

Auto：自适应显示。
在这里插入图片描述

Fill：不保持宽高比进行放大缩小，使得图片充满显示边界。
在这里插入图片描述

ScaleDown：保持宽高比显示，图片缩小或者保持不变。
在这里插入图片描述

None：保持原有尺寸显示。
在这里插入图片描述

图片填充模式参考：
https://developer.huawei.com/consumer/cn/training/course/slightMooc/C101667360160710997

文章来源:https://blog.csdn.net/danfengw/article/details/135195949
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。