Harmony Next -- 图片选择库：宫格展示、全屏预览

PZR0012024-07-25 8:55

hm_image_select_view

OpenHarmony三方库中心仓：https://ohpm.openharmony.cn/#/cn/detail/image_select_view

介绍

Harmony Next 图片选择库，可设置最大选择数量、单行显示数量、横向竖向间隔；点击图片后全屏预览

软件架构

Harmony next版本，兼容API12

效果图

安装教程

ohpm install image_select_view

使用说明

引入仓库

基础使用：

复制代码

import { CommonTitleBar, TitleType } from '@ohos/commonTitleBar'
import { ImageSelectView } from '@ohos/imageSelectView';

@Component
export struct ImagePage {
  build() {
    NavDestination() {
      Scroll() {
        Column() {
          CommonTitleBar({
            leftType: TitleType.NONE,
            centerType: TitleType.TEXT,
            centerText: "图片选择器",
          })

          Text("选择图片、全屏预览")

          ImageSelectView({
            maxSelect: 9, // 最大选择数
            columns: 4, // 一行显示数
            gutterX: 10, // 横向间隔
            gutterY: 10, // 竖向间隔
            onImageListChange: (images) => {
              console.log("PZR_TAG", "Images:" + JSON.stringify(images))
            }
          })
            .margin({
              left: 10,
              right: 10,
            })
            
           Text("展示图片、全屏预览")

          ImageSelectView({
            columns: 4, // 一行显示数
            gutterX: 10, // 横向间隔
            gutterY: 10, // 竖向间隔
            isPreview: true, // 仅作为展示和预览使用，常用于详情页
            imageList: [
              "https://hm-pzr.obs.cn-east-3.myhuaweicloud.com/hm/image_select1.png",
              "https://img-blog.csdnimg.cn/img_convert/fce61a2a73dd039a254ad37d546ed373.png",
              "https://hm-pzr.obs.cn-east-3.myhuaweicloud.com/hm/image_select1.png",
              "https://img-blog.csdnimg.cn/img_convert/fce61a2a73dd039a254ad37d546ed373.png",
              "https://hm-pzr.obs.cn-east-3.myhuaweicloud.com/hm/image_select1.png",
              "https://hm-pzr.obs.cn-east-3.myhuaweicloud.com/hm/image_select1.png",
              "https://hm-pzr.obs.cn-east-3.myhuaweicloud.com/hm/image_select1.png",
              "https://hm-pzr.obs.cn-east-3.myhuaweicloud.com/hm/image_select1.png",],
          })
            .margin({
              left: 10,
              right: 10,
            })
        }
      }
    }
    .backgroundColor($r('sys.color.comp_background_focus'))
    .hideTitleBar(true)
  }
}