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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/49932.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

什么是STP环路保护

在运行生成树协议的网络中,根端口和其他阻塞端口状态是依靠不断接收来自上游设备的BPDU维持。当由于链路拥塞或者单向链路故障导致这些端口收不到来自上游交换设备的BPDU时,设备会重新选择根端口。原先的根端口会转变为指定端口,而原先的阻塞…

2024年NVIDIA A800最新的价格是多少?

英伟达(NVIDIA)的A800作为一款专为深度学习应用设计的GPU芯片,自发布以来便受到了市场的广泛关注。其价格在不同时间段和销售渠道中有所波动,但总体而言,A800的售价较为高昂,远超普通消费级显卡。 一、价格…

(leetcode学习)110. 平衡二叉树

给定一个二叉树,判断它是否是 平衡二叉树 示例 1: 输入:root [3,9,20,null,null,15,7] 输出:true示例 2: 输入:root [1,2,2,3,3,null,null,4,4] 输出:false示例 3: 输入&#xff1…

AI大模型的革命:解析全球主流AI大模型及其对比分析

在人工智能领域,AI大模型的发展正在改变我们的世界。无论是自然语言处理、图像识别,还是自动驾驶和医疗诊断,AI大模型都展示出其强大的潜力和广泛的应用前景。本文将介绍当前世界上主流的AI大模型,并对各个模型做详细介绍和横向对…

stm32入门-----TIM定时器(PWM输出比较——下)

目录 前言 一、硬件元器件介绍 1.舵机 2.直流电机驱动 二、C语言编程步骤 1.开启时钟 2.配置输出的GPIO口 3.配置时基单元 4.初始化输出比较通道 5.开启定时器 三、实践项目 1.PWM驱动LED呼吸灯 2.PWM驱动舵机 3.PWM驱动直流电机 前言 本期我们就开始去进行TIM定时…

802.11 wireshark 抓包

80211 wireshark 抓包 前言配置 monitor软件配置wireshark 操作 前言 本人习惯使用 Omnipeek 抓包分析,所以 wireshark 的实验只讲到抓包完成。 Windows 环境采用 wireshark 抓包是比较麻烦的,因为支持在 Windows 环境中支持抓包的网卡并不多&#xff0…

Springboot 开发之 RestTemplate 简介

一、什么是RestTemplate RestTemplate 是Spring框架提供的一个用于应用中调用REST服务的类。它简化了与HTTP服务的通信,统一了RESTFul的标准,并封装了HTTP连接,我们只需要传入URL及其返回值类型即可。RestTemplate的设计原则与许多其他Sprin…

java找不到符号解决办法

一、java找不到符号 如果你的代码里没有报错,明明是存在的。但是java报错找不到符号。如下所示, 二、解决步骤 1.清除编码工具缓存 本人用的idea, eclipse清除缓存方式有需要的可以百度一下! 2.如果是mavne项目的 先clean 再…

19. 填坑Ⅱ

Description emmm,还是北湖深坑,不用惊喜,不用意外。我们继续用石头填! 北湖的地面依旧是一维的,每一块宽度都为1,高度是非负整数,用一个数组来表示。 还是提供不限量的 1 * 2 规格的石头。 …

vue字段判断是否可以鼠标悬浮或者点击跳转

通过字段判断是否可以鼠标悬浮展示颜色 是否点击 <span :class"[converBond.stkindustry ! null ? hoverSpan:,]"click"converBond.stkindustry ! null ?goToIndustry(converBond.stkindustryname,converBond.stkindustry):false">{{converBon…

MyCms开源免费的自媒体商城博客CMS企业建站系统

MyCms是一款基于Laravel开发的开源免费的自媒体博客CMS系统&#xff0c;适用于个人网站及企业网站开发使用&#xff0c;MyCms基于Apache2.0开源协议发布&#xff0c;免费且不限制商业使用。 源码下载&#xff1a;https://download.csdn.net/download/m0_66047725/89575879 更…

【电路笔记】-D类放大器

D类放大器 文章目录 D类放大器1、概述2、D类放大器介绍3、调制4、放大5、滤波6、效率7、总结1、概述 在之前的文章中,放大器的导通角与其效率之间建立了重要的联系。 事实上,基于高导通角的放大器提供非常好的线性度,例如 A 类放大器,但效率非常有限,通常约为 20% 至 30%…

YOLOv8高效涨点之改进 MAE+ConvNeXtv2

1,论文解读 论文采取的方案 网络设计 实验部分 修改结构 融合MAE和Conv 2、改进YOLOv8代码 + MAE 首先在ultralytics/nn文件夹下,创建一个convnextv2.py文件,新增以下代码 import torch import torch.nn as nn import torch.nn.functional as F from timm.models.layer…

科研成果 | 高精尖中心取得高性能区块链交易调度技术突破

近日&#xff0c;未来区块链与隐私计算高精尖创新中心研究团队在区块链交易效率方面取得突破性进展&#xff0c;最新成果“高性能区块链交易调度引擎”首次为长安链带来高并行度的交易调度&#xff0c;充分利用现有计算资源&#xff0c;显著提升长安链交易处理速度。 随着区块…

第19讲EtherNet/IP网络基础

EtherNet/IP网络知识 一、EtherNet/IP概述 二、EtherNet/IP网络的定位 1、最上层-信息层:主要进行上位机网络信号交互或者控制层信号的传递。 比较常见的话是工控机或者说PLC,就像大脑对信息进行发送的这样一个控制。 EtherNet/IP网络属于最高层——信息层,主要负责信号的…

RPA软件-影刀使用

流程自动化 影刀将操作进行抽象&#xff0c;分为一下几个对象&#xff1a; 网页自动化 &#xff08;1&#xff09; 网页自动化应用场景&#xff1a;网页操作、数据抓取 &#xff08;2&#xff09; 网页操作&#xff1a;基础操作-指令操作&#xff0c;智能操作-关联元素&#…

mysql面试(五)

前言 本章节从数据页的具体结构&#xff0c;分析到如何生成索引&#xff0c;如何构成B树的索引结构。 以及什么是聚簇索引&#xff0c;什么是联合索引 InnoDB数据结构 行数据 我看各种文档中有好多记录数据结构的&#xff0c;但是这些都是看完就忘的东西。在这里详细讲也没…

聊一聊 Node.js(Express)的 req.body、req.params 和 req.query 区别和应用场景

在Node.js的Express框架中&#xff0c;处理客户端发送到服务器的数据时&#xff0c;我们主要使用req.body、req.params和req.query三个属性。这些属性虽然都是请求对象(req)的一部分&#xff0c;但它们的数据来源和用途却各不相同。本文将为大家详细解读它们的区别和使用方法。…

轻量化YOLOv7系列:结合G-GhostNet | 适配GPU,华为诺亚提出G-Ghost方案升级GhostNet

轻量化YOLOv7系列&#xff1a;结合G-GhostNet | 适配GPU&#xff0c;华为诺亚提出G-Ghost方案升级GhostNet 需要修改的代码models/GGhostRegNet.py代码 创建yaml文件测试是否创建成功 本文提供了改进 YOLOv7注意力系列包含不同的注意力机制以及多种加入方式&#xff0c;在本文…

pytest:4种方法实现 - 重复执行用例 - 展示迭代次数

简介&#xff1a;在软件测试中&#xff0c;我们经常需要重复执行测试用例&#xff0c;以确保代码的稳定性和可靠性。在本文中&#xff0c;我们将介绍四种方法来实现重复执行测试用例&#xff0c;并显示当前迭代次数和剩余执行次数。这些方法将帮助你更好地追踪测试执行过程&…