基于ImageKnife库的图片加载框架封装

DevEco Studio 版本：DevEco Studio NEXT Developer Preview2
HarmonyOS API 版本：4.1.0(11)
ImageKnife 版本："@ohos/imageknife": "3.0.0-rc.0"

基于 ImageKnife 库的图片加载框架封装

• 显示本地图片
• 显示网络图片
• 支持图片圆角
• 圆形头像和设置边框
• 支持 SVG，Gif 格式（框架自动支持）
• 自定义大小缩放和样式填充

关键代码 ImageLoader.ets封装如下：

/*
 * Copyright (c) 2022 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { ImageKnifeComponent } from '@ohos/imageknife';

export interface ImageOption {
  // 必须项
  // 主图资源
  loadSrc: string | PixelMap | Resource;
  width: number;
  height: number;

  // 可选项
  // 占位图
  placeholderSrc?: PixelMap | Resource;

  // 继承Image的能力，支持option传入objectFit设置图片缩放，
  // 大图样式：objectFit为Contain时根据图片自适应高度
  // 项目默认：objectFit为Cover时根据Image的容器大小缩放后居中裁剪
  objectFit?: ImageFit
  // 继承Image的能力，支持option传入border，设置边框，圆角
  border?: BorderOptions
  // priority? : taskpool.Priority = taskpool.Priority.LOW
  //
  // context?: common.UIAbilityContext;

  customGetImage?: (context: Context, src: string | PixelMap | Resource) => Promise<ArrayBuffer | undefined>;
  progressListener?: (progress: number) => void;

}

@Component
export struct ImageView {
  option?: ImageOption

  build() {
    ImageKnifeComponent({
      ImageKnifeOption: {
        loadSrc: this.option?.loadSrc,
        placeholderSrc: this.option?.placeholderSrc,
        objectFit: this.option?.objectFit ?? ImageFit.Cover,
        border: this.option?.border,
        customGetImage: this.option?.customGetImage,
        progressListener: this.option?.progressListener,
      },
      adaptiveWidth: this.option?.width,
      adaptiveHeight: this.option?.height,
    })
      .width(this.option?.width)
      .height(this.option?.height)
  }
}

使用 Demo

import { ImageView } from '@ohos/tool';

const url = 'https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png'
const url2 = 'https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg' // 642*642

@Entry
@Component
struct ImageTest {
  build() {
    Scroll() {
      Column() {
        Text("显示本地图片")
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
        ImageView({
          option: {
            loadSrc: $r("app.media.gif1"),
            width: 100,
            height: 100,
          }
        })
          .backgroundColor(Color.Black)
          .width(100).height(100).margin(20)

        Text("显示网络图片")
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
        ImageView({
          option: {
            loadSrc: url2,
            width: 100,
            height: 100,
            placeholderSrc: $r("app.media.app_icon"),
          }
        }).width(100).height(100).margin(20)

        Text("图片圆角")
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
        Row() {
          ImageView({
            option: {
              loadSrc: url2,
              width: 100,
              height: 100,
              placeholderSrc: $r("app.media.app_icon"),
              border: { radius: 8 }
            }
          }).width(100).height(100).margin(20)

          ImageView({
            option: {
              loadSrc: url2,
              width: 100,
              height: 100,
              placeholderSrc: $r("app.media.app_icon"),
              border: {
                radius: {
                  topLeft: 8,
                  topRight: 8,
                },
              },
            }
          }).width(100).height(100).margin(20)
        }

        Text("圆形头像和描边效果")
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
        ImageView({
          option: {
            loadSrc: url2,
            width: 100,
            height: 100,
            placeholderSrc: $r("app.media.app_icon"),
            border: {
              radius: 50,
              width: 2,
              color: Color.Green,
              style: BorderStyle.Solid
            },
          }
        }).width(100).height(100).margin(20)

        Text("自定义大小和填充样式：\n项目默认：ImageFit.Cover\n大图样式：ImageFit.Contain")
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
        Row() {
          ImageView({
            option: {
              loadSrc: $r("app.media.gif1"),
              width: 100,
              height: 100,
              objectFit: ImageFit.Auto
            }
          }).width(100).height(100).margin(20)
            .backgroundColor(Color.Black)

          ImageView({
            option: {
              loadSrc: $r("app.media.gif1"),
              width: 100,
              height: 100,
              objectFit: ImageFit.Contain
            }
          }).width(100).height(100).margin(20)
            .backgroundColor(Color.Black)
        }

        Row() {
          ImageView({
            option: {
              loadSrc: $r("app.media.gif1"),
              width: 100,
              height: 100,
              objectFit: ImageFit.Cover
            }
          }).width(100).height(100).margin(20)
            .backgroundColor(Color.Black)

          ImageView({
            option: {
              loadSrc: $r("app.media.gif1"),
              width: 100,
              height: 100,
              objectFit: ImageFit.Fill
            }
          }).width(100).height(100).margin(20)
            .backgroundColor(Color.Black)
        }

        Row() {
          ImageView({
            option: {
              loadSrc: $r("app.media.gif1"),
              width: 50,
              height: 50,
              objectFit: ImageFit.Cover
            }
          }).width(100).height(100).margin(20)
            .backgroundColor(Color.Black)

          ImageView({
            option: {
              loadSrc: $r("app.media.gif1"),
              width: 50,
              height: 50,
              objectFit: ImageFit.Contain
            }
          }).width(100).height(100).margin(20)
            .backgroundColor(Color.Black)
        }

      }.width('100%')
    }.width('100%').height('100%').scrollBar(BarState.Off)
  }
}