HarmonyOS ArkUI之仿微信图片选择

时间:2021-10-11 04:08:38

HarmonyOS ArkUI之仿微信图片选择

前言

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

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

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

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

效果演示

HarmonyOS ArkUI之仿微信图片选择

项目类说明

HarmonyOS ArkUI之仿微信图片选择

主要知识点

九宫格列表和选择图片列表:网格容器组件(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. }
  31. }

2、点击选择框

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

HarmonyOS ArkUI之仿微信图片选择

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

3、显示选中的图片

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

HarmonyOS ArkUI之仿微信图片选择

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

4、浏览大图

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

HarmonyOS ArkUI之仿微信图片选择

  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. }
  39. }

原文链接:https://harmonyos.51cto.com