【鸿蒙开发】第5课，Image组件

Afra55
126 阅读4分钟

1 Image组件详细介绍

Image组件是鸿蒙操作系统（HarmonyOS）开发框架ArkUI中用于在应用中显示图片的基础组件。它支持多种图片格式和来源，包括本地资源、网络URL以及内存中的图片数据。Image组件的灵活性和强大功能使其成为开发者在构建用户界面时不可或缺的工具。

1.1 参数类型

Image组件的参数类型主要包括以下几种：

  1. string类型：

    • 本地图片：通过路径的方式引用本地图片，例如Image('images/demo.jpg')。注意，使用这种方式时，需要将图片置于项目的特定目录下（如ets目录），并为Image组件提供图片相对于该目录的路径。
    • 网络图片：通过URL引用网络图片，例如Image('http://xxx/xxx.jpg')。在真机中运行鸿蒙应用时，访问网络图片需要配置网络访问权限（如ohos.permission.INTERNET），但在预览器和模拟器中测试时不受限制。

  2. Resource类型：

    • 用于引入resources目录下的图片。resources目录用于统一存放应用所需的各种资源，包括图片、音频、视频等。
    • media目录：存放媒体资源，如图片。该目录下的资源需要使用$r('app.media.<filename>')的方式引用，例如Image($r('app.media.img'))。
    • rawfile目录：用于存储任意格式的原始文件。该目录下的资源可通过$rawfile('path/to/your/file')的方式引用，例如Image($rawfile('icon.png'))。

  3. media.PixelMap：

    • 指的是图片的像素位图，通常是一个二维数组，用于图片编辑的场景。

1.2 常用属性

  1. 图片尺寸：

    • 可以通过width()方法和height()方法设置图片的尺寸。这两个方法可接收的参数类型包括string、number和Resource。
      • string类型：可为百分比（如'100%'）或具体尺寸（如'100px'），常用单位包括px和vp。
      • number类型：默认以vp作为单位。
      • Resource类型：用于引用resources下的element目录中定义的数值，例如$r('app.string.greeting')。

  2. 图片缩放：

    • 当图片的原始大小与Image组件不同时，可以通过objectFit()方法设置图片的显示效果。
      • ImageFit.None：保持原有尺寸显示，不做任何缩放，超出显示区域的部分不显示。
      • ImageFit.Contain：保持宽高比进行缩小或放大，使得显示区域刚好包含整个图片。
      • ImageFit.Cover：保持宽高比进行缩小或放大，使得图片刚好完全覆盖显示区域。
      • ImageFit.Fill：不保持宽高比进行放大缩小，使得图片充满显示区域。
      • ImageFit.ScaleDown：保持宽高比进行缩小或不变（不会放大），使得图片完全显示在显示区域内。
      • ImageFit.Auto：自适应显示。

  3. 图片插值：

Image组件提供了interpolation属性，用于设置图片的插值效果，以减轻低清晰度图片在放大显示时出现的锯齿问题。该属性的值是一个枚举类型，常用的选项包括：

  • ImageInterpolation.None：不使用图片插值。
  • ImageInterpolation.Low：低等质量插值。
  • ImageInterpolation.Medium：中等质量插值。
  • ImageInterpolation.High：高质量插值。
  1. 其他属性：
    • borderRadius：设置图片的圆角半径。
    • border：设置图片的边框。
    • alt：加载时显示的占位图，支持本地图片，不支持网络图片。
    • overlay：在图片上叠加文本或其他组件。

1.3 加载网络图片

当需要从网络加载图片时，除了提供图片的URL外，还需要确保应用具有网络访问权限。这通常需要在应用的配置文件中（如module.json5）声明网络访问权限：

image.png

{"requestPermissions": [{"name":"ohos.permission.INTERNET"}]}

示例代码：

Image('https://www.example.com/xxx.png').width(100).height(100);

1.4 事件处理

Image组件支持多种事件处理，以便在图片加载成功或失败时执行特定的操作：

  • onComplete：图片数据加载成功和解码成功时触发，返回成功加载的图片尺寸。
  • onError：图片加载异常时触发，返回错误信息。

动画.gif

示例代码：

@Entry
  // 装饰器，表示这是页面的入口
@Component
  // 装饰器，表示这是一个组件
struct Index {
  @State imageSrc: string =
    'https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2b9a6b2c4e57475287d672053f056a99~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgQWZyYTU1:q75.awebp?rk3s=f64ab15b&x-expires=1741099635&x-signature=oAXxqHbcfKPFICFuZbluPGdGqnk%3D'; // 网络图片的地址，请替换为实际的地址
  @State isLoading: boolean = true; // 状态变量，用于跟踪图片是否正在加载

  // 构建UI界面
  build() {
    Column() { // 使用 Column 组件来垂直排列子组件
      // 加载进度条
      LoadingProgress()
        .color(this.isLoading ? Color.Red : Color.Green)
        .margin({ top: 20, bottom: 20 }) // 设置进度条的上下外边距为20像素
      // 图片展示
      Image(this.imageSrc)// 指定图片的源地址
        .alt($r('app.media.app_icon'))// 设置图片加载过程中显示的占位图
        .onComplete(() => { // 当图片成功加载时调用
          // 使用 setTimeout 来延迟更新 isLoading 状态
          setTimeout(() => {
            this.isLoading = false; // 延迟更新状态，表示图片已加载完成
          }, 2000); // 延迟2000毫秒（2秒）
        })
        .onError(() => { // 当图片加载失败时调用
          console.error('Image failed to load.'); // 输出错误信息到控制台
          this.isLoading = false; // 更新状态，表示图片加载失败
        })
        .width('100%')// 设置图片的宽度为100%的父容器宽度
        .height(300)// 设置图片的高度为300像素
        .margin({ top: 10, bottom: 10 })// 设置图片的上下外边距为10像素
        .objectFit(ImageFit.Auto)
        .border({ width: 2, color: Color.Orange })// 设置图片的边框宽度为2像素，颜色为黑色
        .borderRadius(20)
    }
    .alignItems(HorizontalAlign.Center) // 设置子组件在水平方向上居中对齐
    .justifyContent(FlexAlign.Center) // 设置子组件在垂直方向上居中对齐
    .padding(20) // 设置容器的内边距为20像素
  }
}

2 鸿蒙开发中的像素单位

鸿蒙系统提供了多种单位来设置组件的宽高，包括PX、VP、FP、LPX以及百分比（100%）等。本文将详细区分这几种类型的区别，并探讨它们在不同场景下的适用情况。

PX适合对精确像素控制有需求的场景；VP适合响应式设计，能够自动适应不同屏幕尺寸；FP适用于与字体大小相关的动态调整；LPX则解决了跨设备一致性的问题；百分比单位则常用于相对布局场景。开发者应根据具体需求和场景选择合适的单位，以确保界面布局的美观和适配性。

2.1 PX（像素）

`${number}px`

定义与特点： PX是像素单位，表示组件在屏幕上的实际像素大小。它是屏幕物理像素单位，直接对应设备屏幕上的物理像素点。

适用场景：

  • 当设计需要与具体像素尺寸相关，或者在不同设备和屏幕分辨率上需要一致的表现时使用。例如，小型控件或图标中的文本。
  • 在视网膜或高清屏幕上可能需要额外的考虑，因为高分辨率屏幕上的像素点更加密集，相同的PX值在不同分辨率屏幕上可能显示大小不同。

2.2 VP（视口单位）

`${number}vp` | number

定义与特点： VP是视口百分比单位，基于视口（即浏览器窗口）的宽度或高度。它能够根据屏幕像素密度转换为屏幕物理像素，是鸿蒙系统的默认像素单位。

适用场景：

  • 常用于响应式设计，确保组件在不同屏幕尺寸上保持相对大小。例如，在适配不同手机屏幕大小时非常有用。
  • 当组件的大小需要根据视口大小动态调整时，VP是理想的选择。

2.3 FP（字体像素）

`${number}fp`

定义与特点： FP是字体大小百分比单位，基于父元素的字体大小。它允许组件的大小相对于父元素的字体大小进行调整，随系统字体大小设置变化。

适用场景：

  • 在响应式设计中特别有用，可以确保组件与文本内容保持适当的比例。例如，在需要动态调整字体大小时，同时调整与字体相关的组件大小。

2.4 LPX（逻辑像素）

`${number}lpx`

定义与特点： LPX是逻辑像素单位，用于解决不同设备分辨率和像素密度的问题。它基于设备的像素密度进行转换，以提供一致的视觉尺寸。

适用场景：

  • 当需要确保组件在不同设备（如桌面、平板、手机等）上看起来一致时使用。LPX允许开发者使用与设备无关的单位，从而简化跨设备的设计和开发。

2.5 百分比（100%）

`${number}%`

定义与特点： 百分比单位表示相对于父元素或容器的大小。例如，50%表示父元素或容器的一半。

适用场景：

  • 当需要根据父元素或容器的尺寸动态调整组件大小时使用。这在布局和响应式设计中非常常见，可以确保组件在不同尺寸和比例下保持适当的比例和位置。
avatar
文章
阅读
粉丝