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

hm_image_select_view

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

介绍

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

软件架构

Harmony next版本，兼容API12

效果图

安装教程

1. ohpm install image_select_view

使用说明

1. 引入仓库

基础使用：

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)}
}