HarmonyOS ArkUI之仿微信图片选择

前言

本项目就是基于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. }
31. }

2、点击选择框

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

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、显示选中的图片

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

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，根据上个页面传的操作值：是否删除、显示删除按钮。(简单示例)

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