运动记录Demo的列表界面介绍
2023-02-25 18:04:01 时间
前言
在参加了"HarmonyOS ArkUI入门训练营——健康生活实战"后,了解并学习了声明式UI开发框架及组件用法,本文是对笔者结营作品中的列表界面作一个小分享,涉及到List组件和Tabs组件的使用。
概述
这是一个运动记录的应用,主要用于管理健康记录运动。可以添加运动信息,包括运动名称、运动时长,并自动计算消耗的卡路里,在记录页面可以查看所添加的运动记录。其界面效果图如下:
正文
一、新建运动数据类
在MainAbility目录下新建文件夹model,在model文件夹中新建两个ets文件,分别命名为SportsData,SportsDataModel,如图:
在 SportsData 中添加代码:
在 SportsDataModel 中添加代码:
二、List组件的使用
1、定义子组件的布局
为了方便预览,可以用 @Preview 装饰,然后打开预览器,点击图示位置显示。
为了方便调试,可以先把数据用静态数据代替,代码如下。
2、列表组件的渲染
Scroll是可滚动容器组件,传入运动类的数组,用ForEach循环遍历渲染,传参给子组件SportsGridItem。
到此步实现的是在一个列表里把所有子项列出来,但想要的效果是按类别将子项分类来显示,那就继续看下去吧~
三、Tabs组件的使用
为了让页签更好看,从文档中可以看到TabContent的TabBar属性可选CustomBuilder类型,进一步可查看该自定义的组件属性方法,需要用 @Builder 装饰。
看完文档后,那就用起来~,代码如下:
为了实现按类别进行列表展示,即要对数据类的Category进行检索分类来渲染。通过学习直播课程,知道有filter这个方法,可以对每个子项遍历使用。
于是总体代码如下:
最后,在底部的页签组件中添加使用、以及运动类和记录类的数据使用、搜索界面的实现等内容,预告在下一篇文章啦,欢迎评论区交流~
结语
以上就是本次的小分享啦!
相关文章
- 软件开发入门教程网之C++ 信号处理
- 【SD3403】基于NPU+AI ISP多媒体SoC开发的4K@60网络摄像机夜间超感光效果测试
- Guava中这些Map的骚操作,让我的代码量减少了50%
- YesApi v5.0,一款立即搭建接口收费平台的神器
- 软件测试|REST Assured 实践
- 经济学人外刊精读PDF标记编辑软件:推荐下载 mac 电脑版PDF编辑器全版本下载
- 软件测试|使用代理配置快速定位接口测试脚本问题
- 软件开发入门教程网之C++ 标准库
- 软件测试|如何实现多套环境的接口自动化测试
- Prometheus 官方记录片(中英双语),带你了解 Prometheus 的前世今生
- 【TUICallKit】小程序全局监听(分包方案)
- 博通收购 VMware 计划受阻,英国监管机构介入
- Kubernetes 上千规模 Pod 最佳实践
- 软件开发入门教程网之C++ 信号处理
- Tailscale ACL 访问控制策略完全指南!
- AI 对话模型被网友玩坏了!这次还可以运行 Docker 容器...
- 我将 9 个 ChatGPT 账号接入微信,我现在整个人都麻了...
- 为什么 APISIX Ingress 是比 Traefik 更好的选择?
- ChatGPT 帮我跑了一个完整的 DevOps 流水线,离了个大谱...
- 5 分钟教你搭建「视频动作分类」系统