四、ArkTS 常用组件

四、ArkTS 常用组件

ArkTS 常用组件-图片

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

概述

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

参数

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

代码语言：javascript代码运行次数：0运行复制

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

• string类型

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

• 本地图片

代码语言：javascript代码运行次数：0运行复制

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

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

• 网络图片

代码语言：javascript代码运行次数：0运行复制

 Image('.png')

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

• **Resource**类型

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

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

• media目录

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

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

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

• rawfile目录

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

常用属性

图片尺寸

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

代码语言：javascript代码运行次数：0运行复制

  Column() {
    Button('常用属性')
    // 图片尺寸可通过`width()`方法和`height()`方法进行设置
    // `string`类型的参数可为百分比，例如`'100%'`，或者为具体尺寸，例如`'100px'`
    Image($r('_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枚举类型，可选的枚举值如下

代码语言：javascript代码运行次数：0运行复制

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

代码语言：javascript代码运行次数：0运行复制

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

各选项的效果如下图所示

image-2024120616214140

图片插值

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

img

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

代码语言：javascript代码运行次数：0运行复制

不使用图片插值。

代码语言：javascript代码运行次数：0运行复制

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

各选项效果如下图所示

本文参与 腾讯云自媒体同步曝光计划，分享自。原始发表：2024-12-09，如有侵权请联系 cloudcommunity@tencent 删除配置权限网络imagemedia