更多内容请访问：Harmonyos技术社区https://harmonyos.51cto.com与华为官方前言本项目基于ArkUI中的声明式编程开发，语言ETS（ExtendedTypeScript），代码写在ets文件中，这个文件用来描述UI布局、风格、事件交互和页面逻辑。官方文档地址：TSextension-baseddeclarativedevelopmentparadigm1TSextension-baseddeclarativedevelopmentparadigm2上一篇文章回顾【鸿蒙ArkUI仿微信朋友圈图片预览】仿微信朋友圈列表展示，九宫格小图展示，点击图片预览，左右滑动切换图片。本文介绍如何选择图片、多选图片、点击浏览大图、删除选中图片，方法和微信一样。由于使用ets语言开发，为了演示方便，图片数据没有获取手机本地图片，使用的是内置资源。效果演示项目类描述主要知识点九方格列表和选择图片列表：格子容器组件（Grid）浏览大图切换页面：滑动容器组件（Swiper）循环渲染迭代数组：渲染组件（ForEach）（目前第二个）parameterInitemGenerator:(item:any,index?:number)=>voidindex不能用）基本组件：图片展示（Image）文字展示（Text）按钮（Button）代码分析1.图片列表主要是网格容器Grid组件和渲染组件ForEach，注释也很清楚，让你更快掌握知识点。（简单示例）@Entry@ComponentstructTest{@StateprivatelistPicture:Array=[$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('1fr1fr1fr1fr')//4等分columns.columnsGap(2)//列间距.rowsGap(2)//行间距}.width('100%').height('100%')}}2。单击选择框处理选中和未选中的效果。单击当前项时，列表中的对象将根据选中状态进行替换，并设置按钮的文本和启用状态。框架会自动更新界面。（项目中部分代码）....../***点击是否选中*/clickIsSelected(item:PictureData){//点击未选中且选中的个数大于总数，则返回if(!item.isSelected&&this.listSelectPicture.length>=this.total){return}//所有列表：替换元素，更新选中状态letnewItem={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{letindex=this.listSelectPicture.indexOf(item.picResource)this.listSelectPicture.splice(index,1)}//根据选择的数量，显示按钮状态和文字this.isEnabledComplete=this.listSelectPicture.length!=0if(this.listSelectPicture.长度==0）{这个。completeText='Complete';}else{this.completeText=`Complete(${this.listSelectPicture.length}/${this.total})`;}}...3、显示选中图片注意要点：根据选择的图片总数，显示或隐藏添加按钮。（项目中部分代码）....../***在build函数之前执行*/privateaboutToAppear(){//第一次进入显示添加按钮letshowAddData=newHomePictureData(-1,$r('app.media.ic_add'),true)this.listPicture.push(showAddData)}/***页面显示触发*/privateonPageShow(){try{letlist:Array=router.getParams().listSelectPicture//保存图片for(letlistKeyoflist){this.listSelectPicture.push(listKey)}//清空旧数据this.listPicture=[]//添加新数据存入idfor(vari=0;i=[$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")]@StateimageIndex:number=0build(){Column(){//切换页面Swiper(){ForEach(this.listPicture,item=>{//ImageImage(item).width('100%').height('100%').objectFit(ImageFit.Cover)//缩放类型},item=>item.toString())}.width('100%').height('100%').index(this.imageIndex)//设置当前index.indicator(false)//不显示指标.loop(false)//关闭循环.onChange((index:number)=>{//索引变化监控//更新索引值this.imageIndex=index})}.width('100%').height('100%')}}更多内容请访问：与华为共建鸿蒙科技社区https://harmonyos.51cto.com
