基于ArkTS语言的OpenHarmony APP应用开发：图片显示器 原创

interface RowInterface {
  (value?: { space?: string | number }): RowAttribute;
}
1.
2.
3.

declare class RowAttribute extends CommonMethod<RowAttribute> {
  alignItems(value: VerticalAlign): RowAttribute;
  justifyContent(value: FlexAlign): RowAttribute;
}
1.
2.
3.
4.

interface ColumnInterface {
  (value?: { space?: string | number }): ColumnAttribute;
}
1.
2.
3.

declare class ColumnAttribute extends CommonMethod<ColumnAttribute> {
  alignItems(value: HorizontalAlign): ColumnAttribute;
  justifyContent(value: FlexAlign): ColumnAttribute;
}
1.
2.
3.
4.

interface ImageInterface {
  (src: string | PixelMap | Resource): ImageAttribute;
}
1.
2.
3.

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.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

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;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

@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%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.