HarmonyOS开发之使用Picker(从相册选择图片),并且通过Swiper组件实现图片预览

news/2024/9/18 13:32:22/ 标签: 鸿蒙, harmonyos

一:效果图:

二:添加依赖

import picker from '@ohos.file.picker';

三:创建showDialog

 showDialog() {AlertDialog.show({message: '从相册选择',alignment: DialogAlignment.Bottom,offset: { dx: 0, dy: -12 },primaryButton: {value: '取消',fontColor: '#0A59F7',action: () => {}},secondaryButton: {value: '确定',fontColor: '#0A59F7',action: () => {try {let photoSelectOptions = new picker.PhotoSelectOptions()photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE//文件类型photoSelectOptions.maxSelectNumber = 5// 单次选择壁纸数量let photoPicker = new picker.PhotoViewPicker()photoPicker.select(photoSelectOptions).then((photoSelectResult: picker.PhotoSelectResult) => {console.log("photoUris ====="+photoSelectResult.photoUris)this.addImages(photoSelectResult.photoUris)}).catch((err: string) => {console.error(TAG, `'PhotoViewPicker.select failed with err: ${JSON.stringify(err)}`)});} catch (err) {console.error(TAG, `'PhotoViewPicker failed with err: ${JSON.stringify(err)}`)}}}})}

四:通过Swiper来实现图片预览

Swiper(this.swiperController) {ForEach(this.imageList, (item: string) => {Image(item).width('100%').height('auto')}, item => item)}.cachedCount(2).index(this.currentImageIndex) // 设置当前图片索引.autoPlay(false).interval(4000).indicator(true).loop(true).duration(1000).itemSpace(0).curve(Curve.Linear).onClick(()=>{this.isSwiperVisible = false; // 关闭 Swiperthis.isVisibility=Visibility.Visible})

五:完整代码

import picker from '@ohos.file.picker';const TAG: string = 'AddPictures';@Extend(Image) function imageStyle() {.width('100%').aspectRatio(1).objectFit(ImageFit.Fill).backgroundColor('#F1F3F5').borderRadius(12)
}@Component
export struct AddPictures{@Provide imageList: Array<string> = []; // 定义并初始化 imageList@State isSwiperVisible: boolean = false; // 控制 Swiper 可见性@State currentImageIndex: number = 0; // 当前展示的图片索引@State isVisibility:Visibility=Visibility.Visibleprivate swiperController: SwiperController = new SwiperController()build() {Column() {Text('有什么想说的就留言吧!...').fontColor($r('app.color.text_color')).fontWeight(400).fontFamily('HarmonyHeiTi').fontSize(14).opacity(0.4).margin({ top:'16vp', bottom: '48vp' }).width('100%').visibility(this.isVisibility)GridRow({ columns: { sm: 3, md: 6, lg: 8 }, gutter: 12 }) {ForEach(this.imageList, (item: string,index:number) => {GridCol({ span: 1 }) {Image(item).imageStyle().onClick(()=>{console.log(TAG+'======'+item)this.currentImageIndex = index // 记录当前索引this.isSwiperVisible = true // 打开 Swiperthis.isVisibility=Visibility.None})}})GridCol({ span: 1 }) {Row() {Image($r('app.media.ic_add')).size({ width: 24, height: 24 }).objectFit(ImageFit.Contain)}.width('100%').height('100%').justifyContent(FlexAlign.Center)}.width('100%').aspectRatio(1).backgroundColor($r('app.color.start_window_background')).borderRadius(12).onClick(() => {this.showDialog()})}.visibility(this.isVisibility)if (this.isSwiperVisible){Swiper(this.swiperController) {ForEach(this.imageList, (item: string) => {Image(item).width('100%').height('auto')}, item => item)}.cachedCount(2).index(this.currentImageIndex) // 设置当前图片索引.autoPlay(false).interval(4000).indicator(true).loop(true).duration(1000).itemSpace(0).curve(Curve.Linear).onClick(()=>{this.isSwiperVisible = false; // 关闭 Swiperthis.isVisibility=Visibility.Visible})}}.backgroundColor('#fff8f9fb').width('90%').height('100%')}addImages = (images: Array<string>) => {images.forEach((item: string) => {if (!this.imageList.includes(item)) {this.imageList.push(item);}})console.log(TAG, `addImages imageList=${JSON.stringify(this.imageList)}`)}showDialog() {AlertDialog.show({message: '从相册选择',alignment: DialogAlignment.Bottom,offset: { dx: 0, dy: -12 },primaryButton: {value: '取消',fontColor: '#0A59F7',action: () => {}},secondaryButton: {value: '确定',fontColor: '#0A59F7',action: () => {try {let photoSelectOptions = new picker.PhotoSelectOptions()photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE//文件类型photoSelectOptions.maxSelectNumber = 5// 单次选择壁纸数量let photoPicker = new picker.PhotoViewPicker()photoPicker.select(photoSelectOptions).then((photoSelectResult: picker.PhotoSelectResult) => {console.log("photoUris ====="+photoSelectResult.photoUris)this.addImages(photoSelectResult.photoUris)}).catch((err: string) => {console.error(TAG, `'PhotoViewPicker.select failed with err: ${JSON.stringify(err)}`)});} catch (err) {console.error(TAG, `'PhotoViewPicker failed with err: ${JSON.stringify(err)}`)}}}})}}


http://www.ppmy.cn/news/1526832.html

相关文章

基于LSTM-Adaboost的多输入单输出回归预测神经网络【MATLAB】

LSTM-Adaboost多输入单输出回归预测是一个结合了长短期记忆网络&#xff08;LSTM&#xff09;和AdaBoost算法的回归模型&#xff0c;旨在处理时间序列数据或具有时间依赖性的多输入数据。下面是对这个模型的详细介绍&#xff1a; 1. LSTM&#xff08;长短期记忆网络&#xff0…

Rust在Web开发中的优势是什么?

作为一种系统级编程语言&#xff0c;Rust在安全性和性能方面拥有得天独厚的优势&#xff0c;使其在Web开发领域展现出强大的竞争力。 1. 内存安全&#xff1a;告别内存泄漏和缓冲区溢出 Rust的核心优势之一就是其强大的内存安全机制。通过所有权系统和借用检查器&#xff0c;…

深度学习速通系列:命名实体识别

命名实体识别&#xff08;NER&#xff09;是自然语言处理&#xff08;NLP&#xff09;中的一项基础技术&#xff0c;它能够从文本中识别出具有特定意义的实体&#xff0c;如人名、地名、组织名等。NER在信息提取、问答系统、句法分析、机器翻译等领域有着广泛的应用。 NER的技…

数据结构之线性表(python)

华子目录 线性表的定义前驱与后继 1.顺序表&#xff08;顺序存储结构&#xff09;python列表与数组的区别列表数组 1.1插入数据实例 1.2删除元素实例 1.3查找元素1.4修改元素1.5综合示例 2.单链表2.1单链表的初始化2.2插入元素示例注意 2.3删除元素示例 2.4修改元素2.5查找元素…

sourcetree配置ssh连接gitee

使用PuttyGen.exe生成的公钥私钥格式和git文档方法生成的不一样&#xff0c; SSH 公钥设置 | Gitee 帮助中心 gitee方法生成的公钥类似&#xff1a; ssh-ed25519 AAAA***5B Gitee SSH Key PuttyGen.exe生成的&#xff1a; 公钥 ---- BEGIN SSH2 PUBLIC KEY ---- Comment:…

Haption力反馈设备在机器人遥操作中的应用优势

在工业、医疗、科研等多个领域&#xff0c;机器人遥操作正在成为一项关键技术&#xff0c;它允许操作者在远离实际工作环境的情况下&#xff0c;通过远程控制系统对机器人进行精准操作。Haption Virtuose力反馈设备作为遥操作系统中的重要组成部分&#xff0c;其应用优势日益凸…

JAVA学习笔记01-变量的初始化

package day01; public class VarDemo { public static void main(String[] args) { int a; //int b,c,d; // int a; int e 300; //声明一个int(整数)的变量名为e并为e存储了300这样的整数数据 声明时并初始化 int f; //声明一个…

利用AI驱动智能BI数据可视化-深度评测Amazon Quicksight(四)

简介 随着生成式人工智能的兴起&#xff0c;传统的 BI 报表功能已经无法满足用户对于自动化和智能化的需求&#xff0c;今天我们将介绍亚马逊云科技平台上的AI驱动数据可视化神器 – Quicksight&#xff0c;利用生成式AI的能力来加速业务决策&#xff0c;从而提高业务生产力。…

C#环境搭建和入门教程--vs2022之下

目录 1.环境搭建 2.先让程序跑起来 3.C#代码结构 4.变量&#xff0c;输入输出介绍 5.内容输入和类型转换 1.环境搭建 我们的这个c#基础学习主要就是在这个vs2022上面进行的&#xff0c;我们的这个c/c使用的都是这个平台 我们首先检查一下我们的这个环境是不是完全的配置了…

大数据新视界 --大数据大厂之数据科学项目实战:从问题定义到结果呈现的完整流程

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

WebSocket 协议

原文地址&#xff1a;xupengboo WebSocket WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 在 WebSocket API 中&#xff0c;浏览器和服务器只需要完成一次握手&#xff0c;两者之间就直接可以创建持久性的连接&#xff0c;并进行双向数据传输。…

基于SSM的在线家教管理系统(含源码+sql+视频导入教程+文档+PPT)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 基于SSM的在线家教管理系统拥有三个角色 管理员&#xff1a;用户管理、教师管理、简历管理、申请管理、课程管理、招聘教师管理、应聘管理、评价管理等 教师&#xff1a;课程管理、应聘…

Weakly-Supervised Video Moment Retrieval via Semantic Completion Network 论文阅读

Weakly-Supervised Video Moment Retrieval via Semantic Completion Network 论文阅读 AbstractIntroductionRelated WorkApproachProblem FormulationProposal Generation ModuleSemantic Completion ModuleTraining of Semantic Completion NetworkNetwork Design Experimen…

SpringBootAdmin源码修改编译002_踩坑记录一堆坑_记录过程_没有成功---VUE工作笔记0027

当前版本是18.19.0 我本地安装的node npm install 执行的时候报错了.上面的错误 说node-ipc@9.2.2的版本 需要使用node 8 10 12 14 16 17的版本,而我安装的是 18.19.0的版本. 这个时候的解决方案是提升node-ipc组件的版本. 可以看到在npmjs网站上找到,对应的组件node-ipc 可…

物联网——DMA+AD多通道

DMA简介 存储器映像 某些数据在运行时不会发生变化&#xff0c;则设置为常量&#xff0c;存在Flash存储器中&#xff0c;节省运行内存的空间 DMA结构图 DMA访问权限高于cpu 结构要素 软件触发源&#xff1a;存储器到存储器传输完成后&#xff0c;计数器清零 硬件触发源&…

系统架构设计师 需求分析篇二

&#x1f4d8; 面向对象分析方法 1. 用例模型 &#x1f4c8; 构建用例模型一般需要经历 4 个阶段&#xff1a; 识别参与者 &#x1f50d;&#xff1a;识别与系统交互的所有事物。合并需求获得用例 &#x1f517;&#xff1a;将需求分配给予其相关的参与者。细化用例描述 &am…

宠物空气净化器应该怎么选择才能选到除毛效果好的产品

朋友在前三个月的时候养了三只猫&#xff0c;每天都乐此不疲地陪玩。看似美好&#xff0c;实则为了猫咪和她妈妈闹过几次离家出走。 最主要的就是现在已经开始换季了&#xff0c;空气中的水含量减少&#xff0c;空气开始变干&#xff0c;路上的粉尘都慢慢的飞扬起来&#xff0…

C语言6大常用标准库 -- 2.<stdlib.h>

目录 引言 2. C标准库--stdlib.h 2.1 简介 2.2 库变量 2.3 库宏 2.4 库函数 2.5 注意事项 &#x1f308;你好呀&#xff01;我是 程序猿 &#x1f30c; 2024感谢你的陪伴与支持 ~ &#x1f680; 欢迎一起踏上探险之旅&#xff0c;挖掘无限可能&#xff0c;共同成长&…

Python酷库之旅-第三方库Pandas(120)

目录 一、用法精讲 531、pandas.DataFrame.reindex_like方法 531-1、语法 531-2、参数 531-3、功能 531-4、返回值 531-5、说明 531-6、用法 531-6-1、数据准备 531-6-2、代码示例 531-6-3、结果输出 532、pandas.DataFrame.rename方法 532-1、语法 532-2、参数 …

Java-数据结构-二叉树-基础 (o゚▽゚)o

文本目录&#xff1a; ❄️一、树形结构&#xff1a; ▶ 1、概念&#xff1a; ▶ 2、特殊的概念&#xff1a; ▶ 3、树的表示形式&#xff1a; ❄️二、二叉树&#xff1a; ▶ 1、概念&#xff1a; ▶ 2、两种特殊的二叉树&#xff1a; ➷ 1&#xff09;、满二叉树&#xff…