HarmonyOS ArkUI之仿微信朋友圈图片预览 原创 精华
作者:陈建朋
前言
新世界的大门已打开,关也关不住!
《华为开发者大会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组件实现多数据列表展示。(核心代码实例)
2、九宫格展示
主要是网格容器Grid组件和渲染组件ForEach(核心代码示例)
3、大图预览
使用滑动容器组件Swiper,通过传递点击的当前下标定位到指定位置(核心代码示例)
评论功能有两部分 评论列表和评论发送输入框。
项目地址
https://gitee.com/dot_happydz_admin/ark-ui.git(需要登录才能看到演示图)
更多原创内容请关注:开鸿 HarmonyOS 学院
入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,共建鸿蒙生态,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。
不错不错,实用
非常6
很好的应用啊,楼主666
哈哈哈,跟https://harmonyos.51cto.com/posts/9243可以组合起来用