HarmonyOSArkUI仿微信朋友圈图片预览

更多内容请访问：与华为官方共建的Harmonyos技术社区https://harmonyos.51cto.com停不下来！《华为开发者大会2021》推出方舟开发框架（ArkUI），官方解释：方舟开发框架是一个支持声明式编程和跨设备多态UI的跨设备高性能UI开发框架。本项目基于ArkUI中的声明式编程开发，语言ETS（ExtendedTypeScript），代码写在ets文件中，该文件用于描述UI布局、风格、事件交互和页面逻辑。官方文档地址：TSextension-baseddeclarativedevelopmentparadigm1TSextension-baseddeclarativedevelopmentparadigm2本文介绍仿微信朋友圈实现列表展示，九方格图片展示，点击图片可预览图片,左右滑动图片切换。效果演示项目类描述主要知识点九方格列表和选择图片列表：格子容器组件（Grid）浏览大图切换页面：滑动容器组件（Swiper）循环渲染迭代数组：渲染组件（ForEach）（目前第二个）parameterInitemGenerator:(item:any,index?:number)=>voidindex不能用）基础组件：图片展示（Image）、文字展示（Text）、按钮（Button）布局容器组件：垂直布局容器（Column），沿水平方向布局容器（Row），并堆叠容器（Stack）List({initialIndex:0}){ForEach(this.listItems,item=>{ListItem(){Row(){Column(){Image(item.bigImg).width(50).height(50).borderRadius(30).margin(5).onClick(()=>{})Blank()}.height("100%")Column(){Text(item.name).fontSize(16).margin({left:0}).width("100%")Row(){Text(item.content).fontSize(14).margin({top:10}).fontColor(Color.Grey).width("80%").textAlign(TextAlign.Start)Blank()}Column(){Grid(){ForEach(this.imageDataArray,item=>{GridItem(){Image(item.smallImg).width(50).height(50)}.sharedTransition("0",{duration:100,curve:Curve.Linear}).onClick(()=>{console.log("item.id==="+item.id)router.push({uri:'pages/imageflige',params:{imageIndex:item.id,//当前图片位置}})})},item=>item.name)}.width(155).columnsTemplate('1fr1fr1fr').rowsGap(2).columnsGap(2)}.width('100%').height(200).alignItems(Horizo??ntalAlign.Start).margin({top:10})}.height("100%")}.height("100%")}.height(250).margin({top:10})},item=>item.name)}2.九宫格展示主要是grid容器Grid组件和渲染组件ForEach(核心代码示例)Column(){Grid(){ForEach(this.imageDataArray,item=>{GridItem(){Image(item.smallImg).width(50).height(50)}.sharedTransition("0",{duration:100,curve:Curve.Linear}).onClick(()=>{console.log("item.id==="+item.id)router.push({uri:'pages/imageflige',params:{imageIndex:item.id,//当前图片位置}})})},item=>item.name)}.width(155).columnsTemplate('1fr1fr1fr').rowsGap(2).columnsGap(2)}.width('100%').height(200).alignItems(Horizo??ntalAlign.Start).margin({top:10})3、大图预览使用滑动容器组件Swiper通过传递点击的当前下标定位指定位置（核心代码示例）。importrouterfrom'@system.router';@Entry@ComponentstructImageflige{@StateprivatelistPicture:Array=[$r("app.media.food1"),$r("app.media.food2"),$r("app.media.food3"),$r("app.media.food4"),$r("app.media.food5"),$r("app.media.food1"),$r("app.media.food2"),$r("app.media.food3"),$r("app.media.food4")]@StateimageIndex:number=0build(){Column(){Stack({alignContent:Alignment.Top}){//切换页面Swiper(){ForEach(this.listPicture,item=>{//图片Image(item).width('100%').height('100%').objectFit(ImageFit.Contain)//缩放类型},item=>item.toString())}.width('100%').height('100%').index(this.imageIndex)//设置当前index.indicator(true)//不显示指标.loop(true)//关闭循环.sharedTransition("0",{duration:100,curve:Curve.Linear}).onChange((index:number)=>{//IndexchangeListen//更新索引值this.imageIndex=index})Image($r("app.media.back")).width(35).height(35).margin(10).backgroundColor(Color.White).onClick(()=>{router.back()})}.height("100%").width("100%").alignContent(Alignment.TopStart)}}privateaboutToAppear(){this.imageIndex=router.getParams().imageIndex}}评论功能分为评论列表和评论发送输入框两部分。更多信息请访问：https://harmonyos，与华为共同打造的鸿蒙技术社区。51cto.com