鸿蒙开发之图片选择器

一、使用

系统的图片选择器真的非常友好,这个绝对要赞一下。

pickPhotos() {
//初始化一个photopicker
let photoPicker = new picker.PhotoViewPicker()
   
//maxSelectNumber最多选择多少张(默认值为50,最大值为500)
//MIMEType 选择文件的类型
photoPicker.select({maxSelectNumber:9,MIMEType:picker.PhotoViewMIMETypes.IMAGE_TYPE}).then(val => {
      //通过val.photoUris就可以拿到图片的Uri数组了
      //val.photoUris
      
    }).catch(err => {
      Prompt.showToast({message:'获取图片失败'})
    })

  }

二、实现图片删除

长按图片,给图片添加一个抖动的动画。这里借助了z轴旋转动画实现。

import picker from '@ohos.file.picker'
import Prompt from '@system.prompt'

/*
 * 开发中动画实现上遇到一个问题不能停止动画的问题
 * 一开始想的是直接操作旋转的角度和z轴的值,但是发现有些gridItem不生效还会动
 * 群友提供了一个思路:
 * 在动画finish回调中不断的重置旋转的角度和z轴的值达到开启关闭动画
 * */

@Entry
@Component
struct OfficialPhotoPickPage2 {

  @State imageUris: string[] = ["https://tse1-mm.cn.bing.net/th/id/OIP-C.LWCXuZysYTsReGHGVjKBvAAAAA?w=211&h=211&c=7&r=0&o=5&dpr=1.9&pid=1.7"
  ,"https://tse3-mm.cn.bing.net/th/id/OIP-C.mmUrUJJ8RtIXNpFFU1XqsgAAAA?w=211&h=211&c=7&r=0&o=5&dpr=1.9&pid=1.7"
  ,"https://c-ssl.dtstatic.com/uploads/blog/202307/03/9WSX9PPas8AzV3V.thumb.400_0.jpeg"
  ,'https://tse2-mm.cn.bing.net/th/id/OIP-C.V7iv7AMzhwagJ3oyhiHvnAAAAA?w=210&h=210&c=7&r=0&o=5&dpr=1.9&pid=1.7']
  stroller: Scroller = new Scroller()
    //监听该属性来动态改变grid的高度
  @State gridHeight: number = 200
    //监听操作按钮显示与否设置动画属性
  @State showDelBtn: boolean = false
    //angle不断改变值来达到动画的停止与启用
  @State angle: number = 0
    //设置动画z轴值
  @State imageRotate: number = 0

//抖动动画
  startAnim(){
    animateTo({
      duration:100,
      curve:Curve.EaseInOut,
      iterations:1,
      playMode:PlayMode.Alternate,
      onFinish:()=>{//在结束的时候通过按钮显示与否改变动画属性
        if( this.showDelBtn ){
          this.angle = this.angle === 0 ? 5 : 0
          this.imageRotate = this.imageRotate === 0 ? 1 : 0;
          this.startAnim();
        }
      }
    },()=>{
    })
  }


  build() {
    Column() {
      Grid() {
        ForEach(this.imageUris,(item,index) => {
          GridItem() {
            Stack() {
              Image(item)
                .borderWidth(3)
                .borderRadius(20)
                .width(100)
                .height(100)
                .margin({top:20})
                .rotate({
                  z:this.imageRotate,
                  angle:this.angle
                })

              Button(){
                //warning '这里记得替换成关闭图片'
                Image($rawfile('guanbi.png'))
                  .width(20)
                  .height(20)
              }
              .fontColor(Color.White)
              .fontSize(15)
              .width(this.showDelBtn ? 20 : 0)
              .height(this.showDelBtn ? 20 : 0)
              .margin({top:15,right:0,left:80})
              .onClick(() => {
                //删除某个图片,并关闭动画
                this.showDelBtn = false
                this.imageUris.splice(index,1)
                this.gridHeight = ((this.imageUris.length/3)+(this.imageUris.length%3>0?1:0))*130
                this.angle = 0
                this.imageRotate = 0
              })
            }
            .alignContent(Alignment.TopEnd)
          }
          .gesture(LongPressGesture({repeat:true}).onAction(() => {
            //长按显示按钮,并开始抖动动画
            this.showDelBtn = true
            this.angle = 5
            this.imageRotate = 1
            this.startAnim();
          }))
        })
      }
      .columnsGap(10)
      .rowsGap(10)
      .width('90%')
      .backgroundColor(Color.Gray)
      .margin({top:20})

      Button('请选择图片')
        .type(ButtonType.Capsule)
        .width(150)
        .height(40)
        .margin({top:30})
        .onClick(() => {
          this.pickPhotos()
        })
    }
    .width('100%')
    .height('100%')
  }

//图片选择
  pickPhotos() {
    let photoPicker = new picker.PhotoViewPicker()
       photoPicker.select({maxSelectNumber:9,MIMEType:picker.PhotoViewMIMETypes.IMAGE_TYPE}).then(val => {
        //现有数据与选择的数据拼接
      this.imageUris = [...this.imageUris,...val.photoUris]
        //更新grid的高度
      this.gridHeight = ((this.imageUris.length/3)+(this.imageUris.length%3>0?1:0))*100
    }).catch(err => {
      Prompt.showToast({message:'获取图片失败'})
    })

  }
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Spring-1-Spring中引入loC和DI

控制反转和依赖注入 IoC 核心是 DI 旨在提供一种更简单的机制来设置组件依赖项,并在整个生命周期中管理这些依赖项 需要某些依赖项的组件通常被称为依赖对象,或者在 IoC 的情况下被称为目标对象 通常, IoC可以分解为两种子类型 依赖注入和依…

Isaac Sim 仿真机器人urdf文件导入

本教程展示如何在 Omniverse Isaac Sim 中导入 urdf 一. 使用内置插件导入urdf 安装urdf 插件 方法是转到“window”->“Extensions” 搜索框中输入urdf, 并启用 通过转至Isaac Utils -> Workflows -> URDF Importer菜单来访问 urdf 扩展。 表格中的 1,2,3 对应着…

从零实现一套低代码(保姆级教程) --- 【6】在项目中使用redux状态管理

摘要 在上一篇文章中的末尾,我们也完成了Input组件的属性面板配置。现在我们的低代码项目已经小有成就了。但是后面的内容还是不少的。 如果你是第一次看到这篇文章,那么请移步到第一节: 从零实现一套低代码(保姆级教程&#xf…

抖店只能做和营业执照对照的产品吗?开店基础教程,新手可收藏!

我是王路飞。 抖店的营业执照有多重要呢?关系到你店铺的类型、类目和产品。 尤其是适合新手做的个体店,不涉及对公账户,货款可以直接提现到你的私人银行卡里,保证金也只有企业店铺的一半。 (只需要身份证就能开通的…

Python入门之数据结构篇

文章目录 准备工作一、数组1.1 简单使用1.2 数组函数1.3 数组方法1.4 列表推导1.5 数组切片 二、元组(tup)2.1 简单使用2.2 元组函数 三、字典(Dictionary)3.1 简单使用3.2 字典函数:关于Python技术储备一、Python所有…

Vue.js学习笔记(1)——Visual Studio Code搭建Vue.js框架

1 开通高德地图API服务 1、进入高德地图API官网(https://lbs.amap.com/): 2、注册登录。 3、进入控制台。 4、点击“应用管理”,点击“我的应用”,创建新应用。 5、添加Key,服务平台选择“Web端&#xff…

MMDetection中的数据处理

CustomDataset 代码路径:mmdet/datasets/custom.py mmdet中的CustomDataset继承自torch的Dataset,因此,对应的需要实现3个虚函数,接下来我们首先看看这3个重要函数的实现。 构造函数 CLASSES None # static变量def __init__…

关于勒索软件盛行,LockBit网络攻击者气焰嚣张的动态情报

一、基本内容 在过去一周内,LockBit团队颇为高调,他们对关键组织、政府和企业发动了一系列的攻击。该勒索软件团队发动的攻击数量远远超过其他所有的勒索团队,CSEM事件为近期勒索事件画上了句号 二、相关发声情况 2023年8月30日&#xff0…

数据库原理知识点清晰总结

数据库基础知识 数据库系统结构 数据库管理系统 数据库设计 关系数据库 关系数据库标准语言SQL 关系数据库规范化理论 数据库保护技术 视图 存储过程 触发器 数据的锁定

[uniapp] 文件查找失败:‘./iconfont.woff?t=1703574566334‘

uniapp 报错 文件查找失败:‘./iconfont.woff?t1703574566334’ uniapp引入图标的时候如果没有处理,就会报这个错误,这个错误是因为字体图标用的相对路径,uniapp不允许, 所以要解决这个错误,只需要我们去到iconfont.css文件内将相对路径改为绝对路径就好 改成 …

【模型部署入门 一】:Pytorch图像分类模型转换ImageNet1000类预训练模型转ONNX

入门学习主要是跟随同济子豪兄,很感谢该博主,本博客代码主体是子豪兄的,我只是总结加工整理记录。 子豪兄对应学习视频链接地址为:ImageNet1000类预训练模型转ONNX 我自己总结的教程中代码使用任何python编译环境都可以直接打开…

Linux系统--账号和权限管理

目录 一、Linux安全模型 二、用户账号和组账号 2.1 用户帐号类型 2.2 组账号 2.3 用户和组的关系 三、两个重要文件夹 3.1 用户账号文件/etc/passwd 3.2 /etc/shadow 四、用户命令 4.1 useradd命令——添加用户 4.2 passwd命令——密码管理 4.3 usermod命令—…

北科智慧智能手提箱旗舰版惊艳亮相2023(香港)智能科技展

2023年12月8日,北科智慧团队在粤港澳大湾区创新发展峰会暨侨交会2023(香港)智能科技展上举办新品发布,推出三款自主研发科技产品:智能手提箱高级版和旗舰版,以及智能呈批夹。新品一经推出,便受到…

PMP®项目管理,2024年1月4日开课啦~想了解的提前查看!

PMP项目管理认证 1🈷4日开课~ 想报名的提前预约啦 👇👇👇 👆(以上是PMP课程内容) 课程介绍 PMP(Project Management Professional)是由美国项目管理协会(…

Kubernetes的理论基础

k8s:kubernetes:8个字母省略,就是k8s。 自动部署,自动扩展和管理容器化部署的应用程序的一个开源系统。k8s是负责自动化运维管理多个容器化程序的集群,是一个功能强大的容器编排工具。分布式和集群化的方式进行容器管理。 1.15 1.18 1.20 1…

vue 基础学习 一

1. vue 使用快速入门三步走 (1) 新建 HTML 页面&#xff0c;引入 Vue.js文件 1 2 3 4 5 6 7 <!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title>Vue.js 入门示例</title> <script src"https://cdn.j…

Python如何实现邮件的发送

python笔记- 发送邮件 依赖&#xff1a; Python代码实现发送邮件&#xff0c;使用的模块是smtplib、MIMEText&#xff0c;实现代码之前需要导入包&#xff1a; import smtplib from email.mime.text import MIMEText 使用163邮件发送邮件&#xff0c;具体代码实现如下&#x…

计算机毕业设计选题推荐,ssm诗词打卡微信小程序 44669(赠送源码数据库 )上万套实战教程手把手教学JAVA、PHP,node.js,C++、python、数据可视化等

诗词打卡微信小程序 摘要 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;诗词打卡微信小程序被用户普遍使用&…

Cron介绍,以及常见的cron表达式

目录 一.cron介绍 1.什么是Cron&#xff1f; 2.Cron语法 时间字段的取值范围如下&#xff1a; 时间字段支持以下特殊字符&#xff1a; 下面是一些示例&#xff1a; 3.虚拟机安装cron(centos7展示) 二.常见的cron表达式 一.cron介绍 1.什么是Cron&#xff1f; Cron是一个…