黑马健康——饮食记录—记录列表

 一，前言

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

二.应用界面UI

（1）页面UI分析

（2）代码

import router from '@ohos.router'
import { CommonConstants } from '../../common/constants/CommonConstants'
import RecordService from '../../service/RecordService'
import GroupInfo from '../../viewmodel/GroupInfo'
import RecordType from '../../viewmodel/RecordType'
import RecordVO from '../../viewmodel/RecordVO'

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

@Component
export default struct RecordList {

  @Consume @Watch('handleRecordsChange') records: RecordVO[]
  @State groups: GroupInfo<RecordType, RecordVO>[] = []

  handleRecordsChange(){
    this.groups = RecordService.calculateGroupInfo(this.records)
  }


  build() {
    List({space: CommonConstants.SPACE_10}){
      ForEach(this.groups, (group: GroupInfo<RecordType, RecordVO>) => {
        ListItem(){
          Column({space: CommonConstants.SPACE_8}){
            // 1.分组的标题
            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.组内记录列表
            List(){
              ForEach(group.items, (item: RecordVO) => {
                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)})
              })
            }
            .width('100%')
          }
          .width('100%')
          .backgroundColor(Color.White)
          .borderRadius(CommonConstants.DEFAULT_18)
          .padding(CommonConstants.SPACE_12)
        }
      })
    }
    .width(CommonConstants.THOUSANDTH_940)
    .height('100%')
    .margin({top: 10})
  }

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

（3）运行效果截图

三.总结

这段代码定义了一个Vue组件RecordList，其主要功能是展示一组记录列表，这些记录按类型分组并提供了每个分组内记录的详细信息，同时也支持删除单个记录的功能。下面是该组件的关键解析：

导入与装饰器

导入了路由模块router用于页面跳转，CommonConstants常量文件，以及服务层RecordService和视图模型相关类。使用@Extend装饰器扩展了Text组件，添加了grayText样式，使文字变为灰色并设定特定的字体大小。使用@Component装饰器定义了RecordList组件。

状态与计算属性

通过@Consume @Watch装饰器监听外部传入的records（记录列表）变化，并在变化时调用handleRecordsChange方法来更新分组信息。定义了一个状态groups，用于存储经过处理后的分组记录信息。

方法定义

handleRecordsChange方法调用RecordService.calculateGroupInfo处理原始记录数据，将其转换为按类型分组的信息列表。deleteButton是一个构建器方法，用于生成删除按钮的图标。

UI构建逻辑

build方法构建组件的UI布局，核心是一个嵌套循环结构：外层循环遍历分组信息groups，为每个分组创建一个列表项。每个分组项包含分组标题（包含图标、名称、建议热量范围及总热量），并绑定点击事件跳转到指定页面。内层循环遍历该分组内的记录，为每条记录创建一个列表项，显示记录的图片、名称、数量、单位和热量。记录列表项支持滑动操作，绑定deleteButton方法以实现删除功能。整个组件布局采用列表和分组列表嵌套，设置了统一的间距、边距、背景色和圆角样式，确保良好的视觉效果和交互体验。

样式与交互

组件利用自定义的样式常量来自CommonConstants，以保持设计的一致性和可维护性。利用了路由功能实现页面导航，以及通过自定义方法实现了列表项的滑动删除操作，增强了用户互动性。

        综上，RecordList组件是一个高度封装和交互丰富的列表展示组件，适用于展示分类记录信息并提供基本的记录管理功能。