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