鸿蒙个人项目-饮食记录-记录列表

---

前言

在当今快节奏的生活中，健康饮食成为了人们关注的焦点。为了更好地管理个人饮食，我们精心打造了鸿蒙个人项目中的饮食记录 - 记录列表功能。这个记录列表项目旨在为用户提供一个便捷、直观且全面的工具，帮助他们精确地记录每日的饮食摄入。通过详细记录食物种类、摄入量、时间等关键信息，用户能够清晰地了解自己的饮食模式，从而更有效地进行饮食规划和健康管理。我们深知，每个人的饮食需求和习惯都各不相同。因此，在设计记录列表时，我们充分考虑了个性化和灵活性。用户可以根据自己的喜好和目标，自定义记录的内容和格式，轻松添加备注和标签，以便更准确地追踪和分析饮食情况。在开发过程中，我们致力于优化用户体验，确保界面简洁美观、操作流畅。同时，利用鸿蒙系统的强大性能，实现快速的数据录入和查询，让用户能够随时随地轻松记录和回顾自己的饮食历史无论您是追求健康生活的健身爱好者，还是需要特殊饮食管理的人群，这个记录列表项目都将成为您的贴心助手，陪伴您在健康饮食的道路上迈出坚实的每一步。

---

一、RecordList组件

1.代码介绍：

这段代码定义了一个列表的构建方法。首先，使用 List 组件创建列表，并设置了间距为 CommonConstants.SPACE_10 。通过 ForEach 循环生成多个列表项，每个列表项包含一个垂直布局的 Column 。在 Column 中：有一个水平布局的 Row 作为分组标题，包含早餐的图标、“早餐”文本（字体大小 18 ，字重 700 ）、建议热量（使用自定义的 grayText 样式）、空白、具体热量值（字体大小 14 ，颜色为 $r('app.color.primary_color') ）和添加图标（填充颜色为 $r('app.color.primary_color') ），且标题部分宽度占满 100% 。内部还有一个列表，通过另一个 ForEach 循环生成组内记录列表项。每个记录列表项是一个水平布局的 Row ，包含食物的图标、食物名称（字重 500 ）和数量（使用 grayText 样式）、空白和热量值（使用 grayText 样式），宽度占满 100% ，并设置了内边距。整个列表的宽度为 CommonConstants.THOUSANDTH_940 ，高度占满，顶部有 10 像素的外边距。列表项的背景颜色为白色，边框圆角为 CommonConstants.DEFAULT_18 ，内边距为 CommonConstants.SPACE_12 ，且支持滑动操作，滑动结束时触发 deleteButton 方法。总的来说，这段代码构建了一个具有分组和详细记录的列表结构，样式和布局设置较为完善，提供了良好的展示效果和交互功能。

2.代码示例：

代码如下：

@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_8 }) {
              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)
    .height('100%')
    .margin({ top: 10 })

  }

3.代码截图

二、代码实现效果截图

---

总结

在未来的迭代中，我们将继续优化记录列表项目的性能和功能，增加更多智能化的分析和推荐，为用户提供更精准、更个性化的饮食记录服务，助力用户在健康饮食的道路上越走越稳。总之，记录列表项目在整个饮食记录应用中起着至关重要的作用，它是用户与健康饮食之间的桥梁。我们将不断努力，让这个项目更加完善，为用户的健康生活贡献更多力量。