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

news2024/11/19 19:33:30

一:效果图:

二:添加依赖

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; // 关闭 Swiper
          this.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.Visible

  private 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 // 打开 Swiper
                this.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; // 关闭 Swiper
          this.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.coloradmin.cn/o/2132560.html

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

相关文章

Java面试、技巧、问题、回复,资源面面观

入门 先了解一下面试流程 复习 Java 基础知识&#xff1a; 温习 Java 编程的核心概念&#xff0c;包括数据类型、变量、循环、数组和面向对象的编程原则。数据结构和算法&#xff1a; 加强您对 Java 编程中使用的基本数据结构和算法的理解。练习编码&#xff1a; 在各种平台上解…

PHP一键约课高效健身智能健身管理系统小程序源码

一键约课&#xff0c;高效健身 —— 智能健身管理系统让健康触手可及 &#x1f3cb;️‍♀️ 告别繁琐&#xff0c;一键开启健身之旅 你还在为每次去健身房前的繁琐预约流程而烦恼吗&#xff1f;现在有了“一键约课高效健身智能健身管理系统”&#xff0c;所有问题都迎刃而解…

YARN----调度策略

Yarn中&#xff0c;负责给应用分配资源的就是Scheduler 在Yarn中有三种调度器可以选择&#xff1a;FIFO Scheduler &#xff0c;Capacity Scheduler&#xff0c;Fair Scheduler FIFO Scheduler 先进先出策略 在进行资源分配的时候&#xff0c;先给队列中最先上的应用进行分配…

springboot从分层到解耦

注释很详细&#xff0c;直接上代码 三层架构 项目结构 源码&#xff1a; HelloController package com.amoorzheyu.controller;import com.amoorzheyu.pojo.User; import com.amoorzheyu.service.HelloService; import com.amoorzheyu.service.impl.HelloServiceA; import o…

GoogleSQL:SQL 中的 Pipe 语法

这些是我根据论文 SQL Has Problems 编写的笔记。我们可以修复它们&#xff1a;SQL 中的 Pipe 语法 TL博士 SQL 长期以来一直是结构化数据处理的主导语言&#xff0c;通过本文&#xff0c;GoogleSQL 团队引入了一种新的管道结构化数据流语法&#xff0c;该语法显著提高了 SQL …

自学前端靠谱吗?

很多同学都会对自学前端持怀疑态度&#xff0c;这靠谱吗&#xff1f; 靠自学能学得会&#xff1f;一听就不靠谱&#xff0c;一定是骗子。 但实际上&#xff0c;大家都掉入一个错觉当中了。。。 一个天大的错觉 指望公司教你 在大厂&#xff0c;会有培训体系&#xff0c;会…

51单片机快速入门之定时器和计数器

51单片机快速入门之定时器 断开外部输入 晶振振荡 假设为 12MHz 12分频之后,为1MHz 当其从0-65536 时,需要65536μs 微秒 也就是65.536ms 毫秒 溢出(值>65536 时)>中断>执行中断操作 假设需要1ms后产生溢出,则需要设置初始值为64536 此时定时器会从 64536 开始计…

AD6120 60V降压芯片 2A的电流 适用于48V降12/5v 高效率转换

AD6120是一款电流模式单片降压开关稳压器&#xff0c;输入电压范围为5V~60V&#xff0c;可在宽输入电压范围内提供2A的连续输出电流&#xff0c;具有优异的负载和线路调节能力。在轻负载下&#xff0c;该稳压器以低频率运行&#xff0c;以保持高效率和低输出纹波 。电流模式控制…

性能测试-jmeter连接数据库(十七)...

百度服务器域名&#xff1a;www.baidu.com 百度的IP&#xff1a;110.242.68.3&#xff08;使用ping www.baidu.com&#xff09; jdbc:mysql://211.103.136.244:7061/test_db: mysql是数据库类型211.103.136.244是服务器IP7061是服务器端口号test_db是服务器的数据库 一、为…

Vite项目中的懒加载介绍

概述 import.meta 元属性将特定上下文的元数据暴露给 JavaScript 模块。它包含了这个模块的信息&#xff0c;例如这个模块的 URL。在vue3项目中&#xff0c;用的比较多的是通过import.meta.env来获取环境变量。而本文将要介绍的import.meta.glob和import.meta.env都是vite提供…

【零基础学习CAPL】——CRC值监控测试

🙋‍♂️【零基础学习CAPL】系列💁‍♂️点击跳转 ——————————————————————————————————–—— 从0开始学习CANoe使用 从0开始学习车载车身 相信时间的力量 星光不负赶路者,时光不负有心人。 目录 1.概述2.需求介绍3.算法4.逻辑判断5.测…

VS2022中文字符输出为乱码的解决

一、问题 vs2022输出中文时&#xff0c;出现乱码现象 二、解决方案 把文件的字符编码格式改为utf-8格式 选择工具&#xff0c;点击自定义 选择命令&#xff0c;点击添加命令 选择文件&#xff0c;点击高级保存选项&#xff0c;然后点击确定 点击高级保存选项 选择utf-8编…

Android10源码刷入Pixel2以及整合GMS

一、ASOP源码下载 具体可以参考我之前发布的文章 二、下载相关驱动包 这一步很关键,关系到编译后的镜像能否刷入后运行 下载链接:Nexus 和 Pixel 设备的驱动程序二进制文件 如下图所示,将两个驱动程序上传到Ubuntu服务器,并进行解压,得到两个脚本: 下载解压后会有两…

华为SMU02B1智能通信电源监控单元模块简介

华为SMU02B1是一款智能通信电源监控单元模块&#xff0c;专为5G嵌入式机框设计&#xff0c;它在通信电源管理领域扮演着重要角色。以下是对该产品的详细介绍&#xff1a; 一、产品概述 主要功能&#xff1a;华为SMU02B1能够监控和管理通信电源系统&#xff0c;提供站点监控功能…

QLExpress规则引擎简述;字符串公式/脚本运算

概述 在业务中会遇到一些场景的运算方式不是固定的&#xff0c;而且内容不是有规律的&#xff0c;无法落库到表中&#xff08;强行落库后也需要针对该内容硬编码写一段特殊的查询方式&#xff09;&#xff1b; 这个时候将这部分计算抽取出来&#xff0c;用一个动态的脚本去执…

Spring web mvc入门练习

对于Spring方面的知识重在多练习 目录 一、计算器 1、前端界面 2、约定前后端交互接口 3、服务器代码 二、用户登录 前端代码 服务器代码 三、留言板 后端代码 前端代码 一、计算器 我们需要通过前后端的交互最终完成这样的界面以及完成需求 1、前端界面 因为主要…

windows系统离线搭建darknet

没有网的情况下采用将安装包全部都下载下来&#xff0c;再安装的方式。darknet在windows上编译问题比较多&#xff0c;经历了3天的踩坑&#xff0c;终于搭建好。。。下面简单记录一下安装过程。 1.下载cuda,cudnn,anaconda,opencv,opencv_python&#xff0c;vs。安装顺序&…

[Redis] Redis中的Hash类型和List类型

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏: &#x1f9ca; Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 &#x1f355; Collection与…

CISP-PTE CMS sqlgun靶场渗透测试

1.打开靶场 2.在搜索框尝试xss <script>alert(1)</script> 发现此处存在xss漏洞 3.在搜索框尝试sql注入 -1 union select 1,2,3# 发现页面有回显 4.查询数据库名 -1 union select 1,database(),3# 5.查询数据库的所有表 -1 union select 1,(select group_conc…

Matlab做二阶函数

关于解答&#xff1a; >> % Expert PID Control % 二阶传递函数的阶跃响应 % 位置式 clc; clear all; close all;n500; % 设置离散点的个数 Ts0.001; % 设置离散的采样时间 epsilon0.001; …