HarmonyOS ArkUI之仿微信朋友圈图片预览
想了解更多内容，微信请访问：
和华为官方合作共建的朋友片预鸿蒙技术社区
https://harmonyos.51cto.com
前言
新世界的大门已打开，关也关不住!
《华为开发者大会2021》推出了方舟开发框l架(ArkUI)，圈图官方解释：方舟开发框架是微信一种跨设备的高性能UI开发框架，支持声明式编程和跨设备多态UI。朋友片预
本项目就是圈图基于ArkUI中的声明式编程开发，语言ETS(Extended Type Script)，微信代码都在ets文件中编写，亿华云计算朋友片预这个文件用于描述 UI 布局、圈图样式、微信事件交互和页面逻辑。朋友片预
官方文档地址：基于TS扩展的圈图声明式开发范式1 基于TS扩展的声明式开发范式2
本文介绍仿微信朋友圈实现列表展示，九宫格小图图片展示，微信点击图片进行图片预览，朋友片预图片左右滑动切换。圈图
效果演示
项目类说明
主要知识点
九宫格列表和选择图片列表：网格容器组件(Grid)
浏览大图切换页面：滑动容器组件(Swiper)
循环渲染迭代数组：渲染组件(ForEach) (目前第二个参数中 itemGenerator: (item: any, index?: number) => void index不能使用)
基础的组件：图片显示(Image) 文本显示(Text) 按钮(Button)
布局容器组件：沿垂直方向布局的容器(Column)，沿水平方向布局容器(Row)，云服务器堆叠容器(Stack)
代码解析
1、朋友圈列表展示
列表使用List组件实现多数据列表展示(核心代码实例)。
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(1fr 1fr 1fr) .rowsGap(2) .columnsGap(2) } .width(100%) .height(200) .alignItems(HorizontalAlign.Start) .margin({ top: 10 }) }.height("100%") } .height("100%") } .height(250) .margin({ top: 10 }) }, item => item.name) }
2、九宫格展示
主要是网格容器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(1fr 1fr 1fr) .rowsGap(2) .columnsGap(2) } .width(100%) .height(200) .alignItems(HorizontalAlign.Start) .margin({ top: 10 })
3、大图预览
使用滑动容器组件Swiper，通过传递点击的当前下标定位到指定位置(核心代码示例)。
import router from @system.router; @Entry @Component struct Imageflige { @State private listPicture: Array<Resource> = [ $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") ] @State imageIndex: number = 0 build() { 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) // 设置当前索引 .indicator(true) // 不显示指示器 .loop(true) // 关闭循环 .sharedTransition("0", { duration: 100, curve: Curve.Linear }) .onChange((index: number) => { // 索引变化监听 // 更新索引值 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) } } private aboutToAppear() { this.imageIndex = router.getParams().imageIndex } }
评论功能有两部分：评论列表和评论发送输入框。
想了解更多内容，请访问：
和华为官方合作共建的鸿蒙技术社区
https://harmonyos.51cto.com
