[文章]基于ArkTS语言的OpenHarmony APP应用开发：图片显示器

1、程序简介

该程序是基于OpenHarmony标准系统编写的UI应用类：简易图片显示器。

该程序设计5个按钮和图片框。当每次按下不同的按钮，则图片框显示框显示图片样式各不相同。

本案例已在OpenHarmony凌蒙派-RK3568开发板验证通过，具体代码可参考：https://gitee.com/Lockzhiner-Electronics/lockzhiner-rk3568-openharmony/tree/master/samples/d03_SampleImageShow

API接口：9

2、知识准备

线性容器类表示按照水平方向或者竖直方向排列子组件的容器，ArkUI开发框架通过 Row 和 Colum 来实现线性布局。

2.1、线性布局容器Row

Row 按照水平方向布局子组件，主轴为水平方向，纵轴为竖直方向。

2.1.1、Row定义介绍

interface RowInterface {
  (value?: { space?: string | number }): RowAttribute;
}

value：可选参数， space 表示设置 Row 的子组件在水平方向上的间距。

2.1.2、Row属性介绍

declare class RowAttribute extends CommonMethod<RowAttribute> {
  alignItems(value: VerticalAlign): RowAttribute;
  justifyContent(value: FlexAlign): RowAttribute;
}

**（1）alignItems：**参数类型为 VerticalAlign ，表示子组件在竖直方向上的布局方。式， VerticalAlign 定义了一下三种对其方式：

• Top：设置子组件在竖直方向上居顶部对齐。
• Center（默认值）：设置子组件在竖直方向上居中对其。
• Bottom：设置子组件在竖直方向上居底部对齐。

**（2）justifyContent：**设置子组件在水平方向上的对齐方式， FlexAlign 定义了一下几种类型：

• Start：元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。
• Center：元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
• End：元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。
• SpaceBetween：主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。
• SpaceAround：主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。
• SpaceEvenly：主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

2.2、线性布局容器Column

Column 按照竖直方向布局子组件，主轴为竖直方向，纵轴为水平方向。

2.2.1、Column定义介绍

interface ColumnInterface {
  (value?: { space?: string | number }): ColumnAttribute;
}

**（1）value：**可选参数， space 表示设置 Column 的子组件在竖直方向上的间距，参数和 Row 一样，读者可类比 Row 来理解。

2.2.2、Column属性介绍

declare class ColumnAttribute extends CommonMethod<ColumnAttribute> {
  alignItems(value: HorizontalAlign): ColumnAttribute;
  justifyContent(value: FlexAlign): ColumnAttribute;
}

**（1）alignItems：**设置子组件在水平方向上的布局方式， HorizontalAlign 定义了以下三种对其方式：

• Start：设置子组件在水平方向上按照语言方向起始端对齐。
• Center（默认值）：设置子组件在水平方向上居左对齐。
• End：设置子组件在水平方向上按照语言方向末端对齐。

**（2）justifyContent：**设置子组件在竖直方向上的对齐方式， FlexAlign 定义了一下几种类型：

• Start：元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。
• Center：元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
• End：元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。
• SpaceBetween：元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。
• SpaceAround：元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。
• SpaceEvenly：元素在主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

2.3、图片组件

Image 用来加载并显示图片的基础组件，它支持从内存、本地和网络加载图片，当从网络加载图片的时候，需要申请网络访问权限。

2.3.1、Image定义介绍

interface ImageInterface {
  (src: string | PixelMap | Resource): ImageAttribute;
}

src：设置要加载的图片资源，支持从本地、网络和内存中加载图片。

2.3.2、Image属性介绍

declare class ImageAttribute extends CommonMethod<ImageAttribute> {
  alt(value: string | Resource): ImageAttribute;
  matchTextDirection(value: boolean): ImageAttribute;
  fitOriginalSize(value: boolean): ImageAttribute;
  fillColor(value: ResourceColor): ImageAttribute;
  objectFit(value: ImageFit): ImageAttribute;
  objectRepeat(value: ImageRepeat): ImageAttribute;
  autoResize(value: boolean): ImageAttribute;
  renderMode(value: ImageRenderMode): ImageAttribute;
  interpolation(value: ImageInterpolation): ImageAttribute;
  sourceSize(value: { width: number; height: number }): ImageAttribute;
  syncLoad(value: boolean): ImageAttribute;
  onComplete(
    callback: (event?: {
      width: number;
      height: number;
      componentWidth: number;
      componentHeight: number;
      loadingStatus: number;
    }) => void,
  ): ImageAttribute;
  onError(callback: (event?: { componentWidth: number; componentHeight: number }) => void): ImageAttribute;
  onFinish(event: () => void): ImageAttribute;
}

**（1）alt：**设置占位图，图片显示之前先显示占位图，比如在加载网络图片或者图片加载失败时的场景。

**（2）objectFit：**设置图片的放缩类型，当 Image 组件大小和图片大小不同时指定图片的放缩类型， ImageFit 提供了以下5种匹配模式：

• Cover（默认值）：保持图片宽高比进行放缩显示，使得图片完全显示在显示边界外。
• Contain：保持图片宽高比进行放缩显示，使得图片完全显示在显示边界内。
• Fill：不保持图片宽高比显示，是图片完全充满显示边界。
• None：保持图片原有尺寸显示，通常配合 objectRepeat 属性一起使用。
• ScaleDown：保持图片宽高比显示，使图片缩小或者保持不变的显示出来。

**（3）renderMode：**设置图片的渲染模式， ImageRenderMode 定义了以下2种渲染模式：

• Original（默认值）：按照原图进行渲染。
• Template：将图像渲染为模板图像，忽略图片的颜色信息。

**（4）sourceSize：**对原始图片做部分解码

2.3.3、Image事件介绍

declare class ImageAttribute extends CommonMethod<ImageAttribute> {
  onComplete(
    callback: (event?: {
      width: number;
      height: number;
      componentWidth: number;
      componentHeight: number;
      loadingStatus: number;
    }) => void,
  ): ImageAttribute;
  onError(callback: (event?: { componentWidth: number; componentHeight: number }) => void): ImageAttribute;
  onFinish(event: () => void): ImageAttribute;
}

• onComplete：图片成功加载时触发该回调，返回图片原始尺寸信息。
• onError：图片加载出现异常时触发该回调。
• onFinish：当加载的源文件为带动效的 svg 图片时，当 svg 动效播放完成时会触发这个回调，如果动效为无限循环动效，则不会触发这个回调。

3、项目编译

3.1、添加图片

将figure/ocean.png复制，点击左侧栏，选中"MyApplication2 => entry => src => main => resources => base => media"，右击"media"，点击"Paste"。如下图所示：

3.2、源代码编辑

打开边侧栏"Project"的工程，打开"entry/src/main/ets/MainAbility/pages/index.ets"。编译index.ets文件，源代码编辑如下所示：

@Entry
@Component
struct Index {
  // 定义一个变量，用于存放图片放缩类型
  @State image_value: ImageFit = ImageFit.Cover
​
  build() {
    Column() {
      Column() {
        Image($r('app.media.ocean'))    // 载入指定图片，即ocean.png
          .objectFit(this.image_value)  // 指定图片放缩类型
      }
      .width('100%')
      .height('80%')
​
      Row() {
        Button('图片可能显示边界外')
          .width(130)
          .height(20)
          .margin(10)
          .fontSize(10)
          .onClick(() => {
            // 保持图片宽高比进行放缩显示，使得图片完全显示在显示边界外
            this.image_value = ImageFit.Cover
          })
​
        Button('图片完全在边界内')
          .width(130)
          .height(20)
          .margin(10)
          .fontSize(10)
          .onClick(() => {
            // 保持图片宽高比进行放缩显示，使得图片完全显示在显示边界内
            this.image_value = ImageFit.Contain
          })
​
        Button('图片完全充满显示边界')
          .width(150)
          .height(20)
          .margin(10)
          .fontSize(10)
          .onClick(() => {
            // 不保持图片宽高比显示，是图片完全充满显示边界
            this.image_value = ImageFit.Fill
          })
​
        Button('图片原有尺寸显示')
          .width(120)
          .height(20)
          .margin(10)
          .fontSize(10)
          .onClick(() => {
            // 保持图片原有尺寸显示，通常配合objectRepeat属性一起使用
            this.image_value = ImageFit.None
          })
​
        Button('图片保持不变')
          .width(120)
          .height(20)
          .margin(10)
          .fontSize(10)
          .onClick(() => {
            // 保持图片宽高比显示，使图片缩小或者保持不变的显示出来
            this.image_value = ImageFit.ScaleDown
          })
      }
      .width('100%')
      .height('20%')
    }
    .width('100%')
    .height('100%')
  }
}

4、运行结果

4.1、本地模拟器

点击右侧栏中的"Previewer"，出现简单计数器页面，点击各个按钮，可显示实验结果。如下图所示：

4.2、远程模拟器

点击"Run"按键，将程序下载到开发板中，可从液晶屏看到程序结果。如下图所示：

5、其他问题

5.1、indext.ets

本目录下的index.ets是本章节需要修改的源代码文件，存放于工程目录下：entry/src/main/ets/MainAbility/pages/index.ets