鸿蒙案例-饮食记录-记录列表

前言

    饮食记录 - 记录列表功能旨在为用户提供一个便捷、直观且全面的工具，帮助他们精确地记录每日的饮食摄入。通过详细记录食物种类、摄入量、时间等关键信息，用户能够清晰地了解自己的饮食模式，从而更有效地进行饮食规划和健康管理。

    在饮食记录中,点击早餐、午餐、晚餐或加餐。进入记录界面后,在顶部搜索栏中搜索食物名称。 或添加自定义食物。在您下次使用时,也可以直接在常用、收藏、组合餐中选择食物。 选择对应食物,按照实际情况输入饮食计量及饮食时段,点击确定>完成打卡。在饮食日记主界面,通过点击时间调节轴上三个按钮,选择查看某天的饮食,点击早餐、午餐、晚餐、加餐卡片右侧图标,点击保存为组合餐,填写组合餐名称等信息,点击保存组合餐。

    用鸿蒙系统的强大性能，实现快速的数据录入和查询，让用户能够随时随地轻松记录和回顾自己的饮食历史无论您是追求健康生活的健身爱好者，还是需要特殊饮食管理的人群，这个记录列表项目都将成为您的贴心助手，陪伴您在健康饮食的道路上迈出坚实的每一步。

---

实现过程

RecordList组件

1.分组标题：设置好一组标题后，然后创建List组件列表，通过ForEach实现循环生成多个列表，其中空白处使用Blank空白填充组件。

 List({space:CommonConstants.SPACE_10}){
      ForEach([1,2,3,4,5],(item)=>{
        ListItem(){
          Column(){
            Row({space:CommonConstants.SPACE_4}){
              Image($r('app.media.ic_breakfast')).width(24)
              Text('早餐').fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_700)
              Text('建议423~592千卡').grayText()
              Blank() 
              Text('190').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%')

2.组内记录列表：设置滑动操作，且向左滑动时触发deleteButton方法即触发删除操作

 List(){
              ForEach([1,2],(item)=>{
                ListItem(){
                  Row({space:CommonConstants.SPACE_6}){
                    Image($r('app.media.toast')).width(50)
                    Column({space:CommonConstants.SPACE_4}){
                      Text('全麦吐司').fontWeight(CommonConstants.FONT_WEIGHT_500)
                      Text('1片').grayText()
                    }
                    Blank()
                    Text('91千卡').grayText()
                  }
                  .width('100%')
                  .padding(CommonConstants.SPACE_6)
                }.swipeAction({end:this.deleteButton.bind(this)})
              })
            }
            .width('100%')
          }
          .width('100%')
          .backgroundColor(Color.White)
          .borderRadius(CommonConstants.DEFAULT_18)
          .padding(CommonConstants.SPACE_12)
        }
      })
    }
    .width(CommonConstants.THOUSANDTH_940)
    .margin({top:10})
    .height('100%')
  }

3.设置删除按钮

 @Builder deleteButton(){
    Image($r('app.media.ic_public_delete_filled'))
      .width(20)
      .fillColor(Color.Red)
      .margin(5)
  }

代码实现

import { CommonConstants } from '../../common/constants/CommonConstants'

@Extend(Text) function grayText(){
  .fontSize(14)
  .fontColor($r('app.color.light_gray'))
}

@Component
export default struct RecordList {
  build() {
    List({space:CommonConstants.SPACE_10}){
      ForEach([1,2,3,4,5],(item)=>{
        ListItem(){
          Column(){
            //1.分组的标题
            Row({space:CommonConstants.SPACE_4}){
              Image($r('app.media.ic_breakfast')).width(24)
              Text('早餐').fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_700)
              Text('建议423~592千卡').grayText()
              Blank() //空白
              Text('190').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%')
            //2.组内记录列表
            List(){
              ForEach([1,2],(item)=>{
                ListItem(){
                  Row({space:CommonConstants.SPACE_6}){
                    Image($r('app.media.toast')).width(50)
                    Column({space:CommonConstants.SPACE_4}){
                      Text('全麦吐司').fontWeight(CommonConstants.FONT_WEIGHT_500)
                      Text('1片').grayText()
                    }
                    Blank()
                    Text('91千卡').grayText()
                  }
                  .width('100%')
                  .padding(CommonConstants.SPACE_6)
                }.swipeAction({end:this.deleteButton.bind(this)})
              })
            }
            .width('100%')
          }
          .width('100%')
          .backgroundColor(Color.White)
          .borderRadius(CommonConstants.DEFAULT_18)
          .padding(CommonConstants.SPACE_12)
        }
      })
    }
    .width(CommonConstants.THOUSANDTH_940)
    .margin({top:10})
    .height('100%')
  }

  @Builder deleteButton(){
    Image($r('app.media.ic_public_delete_filled'))
      .width(20)
      .fillColor(Color.Red)
      .margin(5)
  }
}

页面效果

总结

    通过本文的介绍，我们详细分析了该记录列表组件的设计和实现细节。在饮食记录中,可以点击早餐、午餐、晚餐或加餐。进入记录界面后,可以在顶部搜索栏中搜索食物名称，通过详细记录食物种类、摄入量、时间等关键信息，用户能够清晰地了解自己的饮食模式，从而更有效地进行饮食规划和健康管理。用户可以根据自己的喜好和目标，自定义记录的内容和格式，轻松添加备注和标签，以便更准确地追踪和分析饮食情况。

    记录列表中主要运用了List列表组件实现了遍历循环，List组件主轴默认是垂直方向，即默认情况下不需要手动设置List方向，就可以构建一个垂直滚动列表，注意List下用ForEach循环数据，列表子项用ListItem组件，组件中再设置布局。