四、ArkTS 常用组件-图片

Harry技术

发布于 2025-01-13 17:34:15

30200

代码可运行

文章被收录于专栏：Spring Boot学习之路Spring Boot学习之路

运行总次数：0

代码可运行

ArkTS 常用组件-图片

概述
参数
常用属性
- 图片尺寸
- 图片缩放
- 图片插值

概述

Image为图片组件，用于在应用中显示图片。显示图片 (Image):

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/arkts-graphics-display-V13

参数

**Image**组件的参数类型为string | Resource | media.PixelMap，相关案例见

  Column() {
        // `**Image**`组件的参数类型为`string | Resource | media.PixelMap`
        Button('参数')
        // 使用这种方式引入本地图片，需要将图片置于`ets`目录下，并且需要为`Image`组件提供图片相对于`ets`目录的路径。
        Image('/pages/component/image/no_order.png')
          .width(200).height(200)
        // 网络图片 注意：真机中运行的鸿蒙应用，访问网络图片需要配置网络访问权限，不过在预览器和模拟器中测试时不受限制。
        Image('http://static.tech-harry.cn/typora/a5fb5917ebb0439bb0626489aaa4f1b0.png')
          .width(200).height(200)
        // 可通过`$r('app.media.no_order')`引用
        Image($r('app.media.no_order'))
          .width(200).height(200)
        // 通过`$rawfile('no_order.png')`的方式引用
        Image($rawfile('no_order.png'))
          .width(200).height(200)
      }

string类型

string类型的参数用于通过路径的方式引用图片，包括本地图片和网络图片。

本地图片

 Image('/pages/component/image/no_order.png')

注意：使用这种方式引入本地图片，需要将图片置于ets目录下，并且需要为Image组件提供图片相对于ets目录的路径。

网络图片

 Image('http://static.tech-harry.cn/typora/a5fb5917ebb0439bb0626489aaa4f1b0.png')

**注意：**真机中运行的鸿蒙应用，访问网络图片需要配置网络访问权限，不过在预览器和模拟器中测试时不受限制。权限配置相关的内容在后续章节会系统介绍。

**Resource**类型

Resource类型的参数用于引入resources 目录下的图片。

resources目录下可用于存放图片的目录有resources/*/media 以及resources/rawfile，两个目录下图片的使用方式有所不同，下面逐一介绍

该目录下的资源，需要使用$r('app.media.<filename>')的方式引用。

注意：无需指定具体版本，系统会自动根据所处环境选择相应版本

示例中的no_order.png图片，可通过Image(r('app.media.no_order'))引用。需要注意的是r()的返回值即为**Resource** 类型，因此可以直接将r('app.media.no_order')作为Image 组件的参数，例如Image(r('app.media.img'))。

该目录下的资源，可通过rawfile('path/to/your/file')的方式引用，文件的路径为相对于rawfile 的路径。示例中的no_order.png，须使用rawfile('no_order.png)引用。需要注意的是，rawfile()的返回值也是Resource类型，因此其也可以直接作为Image 组件的参数，如Image(rawfile('no_order.png))。

常用属性

图片尺寸

图片尺寸可通过width()方法和height()方法进行设置。例如

  Column() {
    Button('常用属性')
    // 图片尺寸可通过`width()`方法和`height()`方法进行设置
    // `string`类型的参数可为百分比，例如`'100%'`，或者为具体尺寸，例如`'100px'`
    Image($r('app.media.no_order'))
      .width(100)
      .height(100)
  }

两个方法可接收的参数类型均为string | number | Resource。

下面对三种参数类型逐一进行介绍。

**string**类型

string类型的参数可为百分比，例如'100%'，或者为具体尺寸，例如'100px'。具体尺寸的单位，常用的有两个，分别是px和vp

**number**类型

number类型的参数，默认以vp作为单位。

**Resource**类型

Resource类型参数用于引用resources下的element目录中定义的数值。

引用element目录中的数值，同样需要使用$r()函数。要了解具体语法，需要先熟悉element目录下的文件内容。

图片缩放

当图片的原始大小与Image组件不同时，可通过objectFit()方法来设置图片的显示效果。该方法的参数类型为ImageFit枚举类型，可选的枚举值如下

保持原有尺寸显示，不做任何缩放，超出显示区域的部分不显示。

      Column({ space: 20 }) {
        Column() {
          Button('图片缩放')
          Image($r('app.media.img'))
            .width('730px')
            .height('280px')
          Text('原图')
        }
        Row({ space: 20 }) {
          // `ImageFit.None`保持原有尺寸显示，不做任何缩放，超出显示区域的部分不显示。
          Column() {
            Image($r('app.media.img'))
              .width('450px')
              .height('450px')
              .borderWidth(1)
              .objectFit(ImageFit.None)
            Text('ImageFit.None')
          }
          //`ImageFit.Contain`保持宽高比进行缩小或者放大，使得显示区域刚好包含整个图片。
          Column() {
            Image($r('app.media.img'))
              .width('450px')
              .height('450px')
              .borderWidth(1)
              .objectFit(ImageFit.Contain)
            Text('ImageFit.Contain')
          }
        }
        Row({ space: 20 }) {
          // `ImageFit.Cover`保持宽高比进行缩小或者放大，使得图片刚好完全覆盖显示区域。
          Column() {
            Image($r('app.media.img'))
              .width('450px')
              .height('450px')
              .borderWidth(1)
              .objectFit(ImageFit.Cover)
            Text('ImageFit.Cover')
          }
          // `ImageFit.Fill`不保持宽高比进行放大缩小，使得图片充满显示区域。
          Column() {
            Image($r('app.media.img'))
              .width('450px')
              .height('450px')
              .borderWidth(1)
              .objectFit(ImageFit.Fill)
            Text('ImageFit.Fill')
          }
        }
        Row({ space: 20 }) {
          // `ImageFit.ScaleDown`保持宽高比进行缩小或不变（不会放大），使得图片完全显示在显示区域内。
          Column() {
            Image($r('app.media.img'))
              .width('450px')
              .height('450px')
              .borderWidth(1)
              .objectFit(ImageFit.ScaleDown)
            Text('ImageFit.ScaleDown')
          }
          // `ImageFit.Auto`自适应显示
          Column() {
            Image($r('app.media.img'))
              .width('450px')
              .height('450px')
              .borderWidth(1)
              .objectFit(ImageFit.Auto)
            Text('ImageFit.Auto')
          }
        }
      }

各选项的效果如下图所示

image-20241206162141430

图片插值

当原图分辨率较低并且需要放大显示时，图片会模糊并出现锯齿。如下图所示

img

这时可以使用interpolation()方法对图片进行插值，使图片显示得更清晰。该方法的参数为ImageInterpolation枚举类型，可选的值有

不使用图片插值。

 Column({ space: 20 }) {
        Column() {
          Button('图片插值')
          Text('原图分辨率 40px*40px')
          Row() {
            Column() {
              Image($r('app.media.interpolation'))
                .width(100)
                .height(100)
                .interpolation(ImageInterpolation.None)
              Text('None')
            }
            Column() {
              Image($r('app.media.interpolation'))
                .width(100)
                .height(100)
                .interpolation(ImageInterpolation.Low)
              Text('Low')
            }
          }
          Row() {
            Column() {
              Image($r('app.media.interpolation'))
                .width(100)
                .height(100)
                .interpolation(ImageInterpolation.Medium)
              Text('Medium')
            }
            Column() {
              Image($r('app.media.interpolation'))
                .width(100)
                .height(100)
                .interpolation(ImageInterpolation.High)
              Text('High')
            }
          }
        }
      }

各选项效果如下图所示