文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

HarmonyOS ArkUI之仿微信图片选择

2024-12-02 17:24

关注

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

前言

本项目就是基于ArkUI中的声明式编程开发,语言ETS(Extended Type Script),代码都在ets文件中编写,这个文件用于描述 UI 布局、样式、事件交互和页面逻辑。

官方文档地址:基于TS扩展的声明式开发范式1 基于TS扩展的声明式开发范式2

前文回顾【HarmonyOS ArkUI之仿微信朋友圈图片预览】仿微信朋友圈实现列表展示,九宫格小图图片展示,点击图片进行图片预览,图片左右滑动切换。

本文介绍仿照微信选择图片、多选图片、点击浏览大图,删除选择的图片,因为用的ets语言开发,为了方便演示,图片数据没有获取手机本地图片,使用内置资源。

效果演示

项目类说明

主要知识点

九宫格列表和选择图片列表:网格容器组件(Grid)

浏览大图切换页面:滑动容器组件(Swiper)

循环渲染迭代数组:渲染组件(ForEach) (目前第二个参数中 itemGenerator: (item: any, index?: number) => void index不能使用)

基础的组件:图片显示(Image) 文本显示(Text) 按钮(Button)

代码解析

1、图片列表

主要是网格容器Grid组件和渲染组件ForEach,注释也很清楚,让你更快掌握知识点。(简单示例)

  1. @Entry 
  2. @Component 
  3. struct Test { 
  4.   @State private listPicture: Array = [ 
  5.     $r("app.media.ic_picture1"), $r("app.media.ic_picture2"), $r("app.media.ic_picture3"), 
  6.     $r("app.media.ic_picture4"), $r("app.media.ic_picture5"), $r("app.media.ic_picture6"), 
  7.     $r("app.media.ic_picture7"), $r("app.media.ic_picture8"), $r("app.media.ic_picture9"), 
  8.     $r("app.media.ic_picture10"), $r("app.media.ic_picture11"), $r("app.media.ic_picture12"
  9.   ] 
  10.  
  11.   build() { 
  12.     Column() { 
  13.       // 网格图片列表 
  14.       Grid() { 
  15.         ForEach(this.listPicture, item => { 
  16.           GridItem() { 
  17.             // 图片 
  18.             Image(item) 
  19.               .width('100%'
  20.               .height(90) 
  21.               .objectFit(ImageFit.Cover) // 缩放类型 
  22.           } 
  23.         }, item => item.toString()) // ForEach第三个参数需要设置,否则模拟器不显示 
  24.       }.columnsTemplate('1fr 1fr 1fr 1fr') // 4等分列 
  25.       .columnsGap(2) // 列间距 
  26.       .rowsGap(2) // 行间距 
  27.     } 
  28.     .width('100%'
  29.     .height('100%'
  30.   } 

2、点击选择框

处理选中和未选中效果,主要点击当前项时,根据选中状态进行替换列表中的对象,设置按钮的文字和启用状态,框架会自动更新界面。(项目中部分代码)

  1. ...... 
  2.    
  3.   clickIsSelected(item:PictureData) { 
  4.     // 点击未选中 且 选中数大于总数,则返回 
  5.     if (!item.isSelected && this.listSelectPicture.length >= this.total) { 
  6.       return 
  7.     } 
  8.  
  9.     //全部列表:替换元素、更新选中状态 
  10.     let newItem = { 
  11.       id: item.id, 
  12.       picResource: item.picResource, 
  13.       isSelected: !item.isSelected 
  14.     } 
  15.     this.listAllPicture.splice(item.id, 1, newItem) 
  16.  
  17.     //选中的列表:选中就添加,未选中删除 
  18.     if (newItem.isSelected) { 
  19.       this.listSelectPicture.push(item.picResource) 
  20.     } else { 
  21.       let index = this.listSelectPicture.indexOf(item.picResource) 
  22.       this.listSelectPicture.splice(index, 1) 
  23.     } 
  24.  
  25.     // 根据选中的数量,显示按钮状态和文字 
  26.     this.isEnabledComplete = this.listSelectPicture.length != 0 
  27.     if(this.listSelectPicture.length == 0){ 
  28.       this.completeText = '完成'
  29.     }else
  30.       this.completeText = `完成(${this.listSelectPicture.length}/${this.total})`; 
  31.     } 
  32.   } 
  33. ...... 

3、显示选中的图片

需要注意的点:根据选择的图片总数,显示或隐藏添加按钮。(项目中部分代码)

  1. ...... 
  2.    
  3.   private aboutToAppear() { 
  4.     // 首次进入显示添加按钮 
  5.     let showAddData = new HomePictureData(-1, $r('app.media.ic_add'), true
  6.     this.listPicture.push(showAddData) 
  7.   } 
  8.  
  9.    
  10.   private onPageShow() { 
  11.     try { 
  12.       let list: Array = router.getParams().listSelectPicture 
  13.       // 存入图片 
  14.       for (let listKey of list) { 
  15.         this.listSelectPicture.push(listKey) 
  16.       } 
  17.       // 清空旧数据 
  18.       this.listPicture = [] 
  19.       // 添加新的数据,存入id 
  20.       for (var i = 0;i < this.listSelectPicture.length; i++) { 
  21.         let resource = this.listSelectPicture[i] 
  22.         this.listPicture.push(new HomePictureData(i, resource, false)) 
  23.       } 
  24.       // 判断是否小于总数,设置最后一位显示加号 
  25.       if (this.listSelectPicture.length < this.total) { 
  26.         let showAddData = new HomePictureData(-1, $r('app.media.ic_add'), true
  27.         this.listPicture.push(showAddData) 
  28.       } 
  29.     } catch (err) { 
  30.       console.log(`router错误 code: ${err.code}, msg: ${err.msg}`) 
  31.     } 
  32.   } 
  33. ...... 

4、浏览大图

主要使用滑动容器组件Swiper,根据上个页面传的操作值:是否删除、显示删除按钮。(简单示例)

  1. @Entry 
  2. @Component 
  3. struct Test { 
  4.   @State private listPicture: Array = [ 
  5.     $r("app.media.ic_picture1"), $r("app.media.ic_picture2"), $r("app.media.ic_picture3"), 
  6.     $r("app.media.ic_picture4"), $r("app.media.ic_picture5"), $r("app.media.ic_picture6"), 
  7.     $r("app.media.ic_picture7"), $r("app.media.ic_picture8"), $r("app.media.ic_picture9"), 
  8.     $r("app.media.ic_picture10"), $r("app.media.ic_picture11"), $r("app.media.ic_picture12"
  9.   ] 
  10.   @State imageIndex:number = 0 
  11.  
  12.   build() { 
  13.     Column() { 
  14.       // 切换页面 
  15.       Swiper() { 
  16.         ForEach(this.listPicture, item => { 
  17.  
  18.           // 图片 
  19.           Image(item) 
  20.             .width('100%'
  21.             .height('100%'
  22.             .objectFit(ImageFit.Cover) //缩放类型 
  23.  
  24.         }, item => item.toString()) 
  25.       } 
  26.       .width('100%'
  27.       .height('100%'
  28.       .index(this.imageIndex)// 设置当前索引 
  29.       .indicator(false)// 不显示指示器 
  30.       .loop(false) // 关闭循环 
  31.       .onChange((index: number) => {// 索引变化监听 
  32.         // 更新索引值 
  33.         this.imageIndex = index 
  34.       }) 
  35.     } 
  36.     .width('100%'
  37.     .height('100%'
  38.   } 

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

 

来源:鸿蒙社区内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯