黑马健康App（三）

系列文章目录

第一章 黑马健康APP
第二章 黑马健康APP
第三章 黑马健康APP
第四章 黑马健康APP
第五章 黑马健康APP

---

第三章 黑马健康APP

前言

综合运用本学期所学内容及个人自学知识，使用HarmonyOS 4.0及以上版本开发一款具有实用性和创新性的移动应用软件。

---

一、记录列表

这个栏目是用于后面添加记录是用于展示信息的界面，总的来说分为两个部分分别是分组标题和组内记录列表

1.分组标题

总体思路就是写出一个标题模板，然后使用List列表嵌套forEach循环，在调用的时候渲染。后面图片添加路由功能，点击图片跳转到对应的子页
代码如下：

Row({space: CommonConstants.SPACE_4}){
              Image(group.type.icon).width(24)
              Text(group.type.name).fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_700)
              Text(`建议${group.type.min}~${group.type.max}千卡`).grayText()
              Blank()
              Text(group.calorie.toFixed(0)).fontSize(14).fontColor($r('app.color.primary_color'))
              Text('千卡').grayText()
              Image($r('app.media.ic_public_add_norm_filled'))
                .width(20)
                .fillColor($r('app.color.primary_color'))
            }
            .width('100%')
            .onClick(() => {
              router.pushUrl({
                url: 'pages/ItemIndex',
                params: {type: group.type}
              })
            })

2.组内记录列表

主要实现方式与分组标题类似,此处不再赘述

ListItem(){
                  Row({space: CommonConstants.SPACE_6}){
                    Image(item.recordItem.image).width(50)
                    Column({space: CommonConstants.SPACE_4}){
                      Text(item.recordItem.name).fontWeight(CommonConstants.FONT_WEIGHT_500)
                      Text(`${item.amount}${item.recordItem.unit}`).grayText()
                    }
                    Blank()
                    Text(`${item.calorie.toFixed(0)}千卡`).grayText()
                  }
                  .width('100%')
                  .padding(CommonConstants.SPACE_6)
                }.swipeAction({end: this.deleteButton.bind(this)})

---

总结

以上就是今天要写的内容，本文简单介绍了该app饮食记录页的两个小功能，让我们期待后续的功能的开发