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)
  }
}
相关推荐
安卓开发者11 小时前
鸿蒙NEXT应用接入快捷栏:一键直达,提升用户体验
java·harmonyos·ux
HMS Core11 小时前
消息推送策略:如何在营销与用户体验间找到最佳平衡点
华为·harmonyos·ux
Brianna Home12 小时前
【案例实战】鸿蒙分布式调度:跨设备协同实战
华为·wpf·harmonyos
Bert丶seven12 小时前
鸿蒙Harmony实战开发教学(No.4)-RichText组件基础到高阶介绍篇
华为·harmonyos·arkts·鸿蒙·鸿蒙系统·arkui·开发教程
鸿蒙小白龙13 小时前
openharmony之分布式蓝牙实现多功能场景设备协同实战
分布式·harmonyos·鸿蒙·鸿蒙系统·open harmony
爱吃水蜜桃的奥特曼13 小时前
玩Android Harmony next版,通过项目了解harmony项目快速搭建开发
android·harmonyos
鸿蒙小白龙14 小时前
openharmony之分布式购物车开发实战
分布式·harmonyos·鸿蒙·鸿蒙系统·open harmony
鸿蒙小白龙14 小时前
openharmony之分布式相机开发:预览\拍照\编辑\同步\删除\分享教程
分布式·harmonyos·鸿蒙·鸿蒙系统·open harmony
安卓开发者17 小时前
鸿蒙NEXT鼠标光标开发完全指南
华为·计算机外设·harmonyos
●VON1 天前
重生之我在大学自学鸿蒙开发第九天-《分布式流转》
学习·华为·云原生·harmonyos·鸿蒙