HarmonyOS ArkUI之仿微信图片选择
作者:admin    发布时间: 2021-11-29 13:08

想晓畅更众内容,请访问:

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,注解也很明了,让你更快掌握知识点。(浅易示例)

@Entry @Component struct Test {   @State private listPicture: Array<Resource> = [     $r("app.media.ic_picture1"), $r("app.media.ic_picture2"), $r("app.media.ic_picture3"),     $r("app.media.ic_picture4"), $r("app.media.ic_picture5"), $r("app.media.ic_picture6"),     $r("app.media.ic_picture7"), $r("app.media.ic_picture8"), $r("app.media.ic_picture9"),     $r("app.media.ic_picture10"), $r("app.media.ic_picture11"), $r("app.media.ic_picture12")   ]    build() {     Column() {       // 网格图片列外       Grid() {         ForEach(this.listPicture, item => {           GridItem() {             // 图片             Image(item)               .width('100%')               .height(90)               .objectFit(ImageFit.Cover) // 缩放类型           }         }, item => item.toString()) // ForEach第三个参数必要竖立,否则模拟器不表现       }.columnsTemplate('1fr 1fr 1fr 1fr') // 4平分列       .columnsGap(2) // 列间距       .rowsGap(2) // 走间距     }     .width('100%')     .height('100%')   } } 
2、点击选择框

处理选中和未选中成果,主要点击现在项时,按照选中状态进走替换列外中的对象,竖立按钮的文字和启用状态,框架会自动更新界面。(项现在中片面代码)

......   /**    * 点击是否选中    */   clickIsSelected(item:PictureData) {     // 点击未选中 且 选中数大于总数,则返回     if (!item.isSelected && this.listSelectPicture.length >= this.total) {       return     }      //通盘列外:替换元素、更新选中状态     let newItem = {       id: item.id,       picResource: item.picResource,       isSelected: !item.isSelected     }     this.listAllPicture.splice(item.id, 1, newItem)      //选中的列外:选中就增补,未选中删除     if (newItem.isSelected) {       this.listSelectPicture.push(item.picResource)     } else {       let index = this.listSelectPicture.indexOf(item.picResource)       this.listSelectPicture.splice(index, 1)     }      // 按照选中的数目,表现按钮状态和文字     this.isEnabledComplete = this.listSelectPicture.length != 0     if(this.listSelectPicture.length == 0){       this.completeText = '完善';     }else{       this.completeText = `完善(${this.listSelectPicture.length}/${this.total})`;     }   } ...... 
3、表现选中的图片

必要仔细的点:按照选择的图片总数,表现或暗藏增补按钮。(项现在中片面代码)

......   /**    * 在build函数之前实走    */   private aboutToAppear() {     // 始次进入表现增补按钮     let showAddData = new HomePictureData(-1, $r('app.media.ic_add'), true)     this.listPicture.push(showAddData)   }    /**    * 页面表现触发    */   private onPageShow() {     try {       let list: Array<Resource> = router.getParams().listSelectPicture       // 存入图片       for (let listKey of list) {         this.listSelectPicture.push(listKey)       }       // 清空旧数据       this.listPicture = []       // 增补新的数据,存入id       for (var i = 0;i < this.listSelectPicture.length; i++) {         let resource = this.listSelectPicture[i]         this.listPicture.push(new HomePictureData(i, resource, false))       }       // 判定是否幼于总数,竖立末了一位表现添号       if (this.listSelectPicture.length < this.total) {         let showAddData = new HomePictureData(-1, $r('app.media.ic_add'), true)         this.listPicture.push(showAddData)       }     } catch (err) {       console.log(`router舛讹 code: ${err.code}, msg: ${err.msg}`)     }   } ...... 
4、涉猎大图

主要行使滑动容器组件Swiper,按照上个页面传的操作值:是否删除、表现删除按钮。(浅易示例)

@Entry @Component struct Test {   @State private listPicture: Array<Resource> = [     $r("app.media.ic_picture1"), $r("app.media.ic_picture2"), $r("app.media.ic_picture3"),     $r("app.media.ic_picture4"), $r("app.media.ic_picture5"), $r("app.media.ic_picture6"),     $r("app.media.ic_picture7"), $r("app.media.ic_picture8"), $r("app.media.ic_picture9"),     $r("app.media.ic_picture10"), $r("app.media.ic_picture11"), $r("app.media.ic_picture12")   ]   @State imageIndex:number = 0    build() {     Column() {       // 切换页面       Swiper() {         ForEach(this.listPicture, item => {            // 图片           Image(item)             .width('100%')             .height('100%')             .objectFit(ImageFit.Cover) //缩放类型          }, item => item.toString())       }       .width('100%')       .height('100%')       .index(this.imageIndex)// 竖立现在索引       .indicator(false)// 不表现指使器       .loop(false) // 关闭循环       .onChange((index: number) => {// 索引转折监听         // 更新索引值         this.imageIndex = index       })     }     .width('100%')     .height('100%')   } } 

想晓畅更众内容,请访问:

51CTO和华为官方战略配相符共建的鸿蒙技术社区

https://harmonyos.51cto.com

【编辑保举】

鸿蒙官方战略配相符共建——HarmonyOS技术社区 【鸿蒙开发】开发笔记-对象有关映射数据库 HarmonyOS Sample 之 Pasteboard 分布式粘贴板 始末电竞快览行使学ArkUI HarmonyOS Codelabs之Js2JavaCodegen JSFA调用PA工具 HarmonyOS ArkUI之仿微信友人圈图片预览

Powered by 2021求个直接能用的网站-十大黄软排行榜-求大神给个靠谱的 @2018 RSS地图 HTML地图

Copyright 365建站 © 2013-2021 365建站器 版权所有