当前位置: 首页 > news >正文

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

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 生成对抗网络(Generative Adversarial Network,简称GAN
  • 3dsMax 设置近平面削减,靠近模型之后看不到模型,看很小的模型放大看不到
  • MySQL:增删改查、临时表、授权相关示例
  • 一个注解实现分布式锁加锁
  • RockyLinux 9 PXE Server bios+uefi 自动化部署 RockLinux 8 9
  • 数据库编程中游标 连接 commit
  • js——浅拷贝和深拷贝
  • 【Git多人协作开发】同一分支下的多人协作开发模式
  • springboot配置文件如何读取pom.xml的值
  • 新电脑如何设置 npm 源及查看源、安装 cnpm、pnpm 和 yarn 的详细教程
  • Python研究生毕业设计,数据挖掘、情感分析、机器学习
  • scikit-learn中fit_transform会改变原始数据吗
  • 江科大/江协科技 STM32学习笔记P9-11
  • Si24R03:高度集成的低功耗SOC芯片中文资料
  • 05 ES6中的Set类型
  • [Vue CLI 3] 配置解析之 css.extract
  • android高仿小视频、应用锁、3种存储库、QQ小红点动画、仿支付宝图表等源码...
  • Android开发 - 掌握ConstraintLayout(四)创建基本约束
  • es6
  • isset在php5.6-和php7.0+的一些差异
  • JavaWeb(学习笔记二)
  • Markdown 语法简单说明
  • oldjun 检测网站的经验
  • Python学习笔记 字符串拼接
  • React 快速上手 - 07 前端路由 react-router
  • Vue2.x学习三:事件处理生命周期钩子
  • windows-nginx-https-本地配置
  • 模型微调
  • 软件开发学习的5大技巧,你知道吗?
  • 【运维趟坑回忆录】vpc迁移 - 吃螃蟹之路
  • Semaphore
  • # Swust 12th acm 邀请赛# [ E ] 01 String [题解]
  • #php的pecl工具#
  • #宝哥教你#查看jquery绑定的事件函数
  • #常见电池型号介绍 常见电池尺寸是多少【详解】
  • (06)金属布线——为半导体注入生命的连接
  • (1)Jupyter Notebook 下载及安装
  • (4)(4.6) Triducer
  • (ctrl.obj) : error LNK2038: 检测到“RuntimeLibrary”的不匹配项: 值“MDd_DynamicDebug”不匹配值“
  • (el-Transfer)操作(不使用 ts):Element-plus 中 Select 组件动态设置 options 值需求的解决过程
  • (Java入门)学生管理系统
  • (二)什么是Vite——Vite 和 Webpack 区别(冷启动)
  • (机器学习-深度学习快速入门)第一章第一节:Python环境和数据分析
  • (免费分享)基于springboot,vue疗养中心管理系统
  • (南京观海微电子)——示波器使用介绍
  • (切换多语言)vantUI+vue-i18n进行国际化配置及新增没有的语言包
  • (推荐)叮当——中文语音对话机器人
  • (转)真正的中国天气api接口xml,json(求加精) ...
  • .bat批处理(十):从路径字符串中截取盘符、文件名、后缀名等信息
  • .gitignore文件忽略的内容不生效问题解决
  • .NET Core、DNX、DNU、DNVM、MVC6学习资料
  • .NET DevOps 接入指南 | 1. GitLab 安装
  • .NET MVC第三章、三种传值方式
  • .net/c# memcached 获取所有缓存键(keys)
  • .NET6 开发一个检查某些状态持续多长时间的类