开发鸿蒙项目黑马健康APP饮食记录UI

   一、工作的主要介绍

今天的任务主要是完成饮食记录中的饮食记录列表；这一部分主要用List的组件。

二、运行效果及主要设计思路的介绍

1.饮食记录中的饮食记录列表的运行截图

2.饮食记录中的饮食卡片的思路

饮食记录中的饮食记录列表首先根据页面的布局，首先是列式布局用Column容器，先写一个卡片，然后用foreach进行循环，把每一列循环出来，添加完成就可以了。

三、在设计的过程中遇到的问题

1.怎么删除早餐中的全麦吐司的每一行

给ListItem加一个策划效果，然后定义一个函数来增加删除的图标，然后在这个函数中添加点击事件进行删除，最后.swipeAction来调用这个函数。

四、最终实验代码

1.饮食记录中的饮食记录列表代码

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(){
                    Image($r('app.media.toast')).width(50)
                    Column(){
                      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})

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

五、总结

1.列表和列表项的动态生成

使用List和ForEach组件，代码动态生成了食品记录的列表。ForEach接受一个数组作为输入，并为数组中的每个元素生成一个ListItem组件。

2.交互功能实现

通过swipeAction属性为ListItem添加了滑动删除功能，当用户在列表项上滑动时，会显示一个删除按钮。

3.资源和样式的统一管理

使用$r函数引用应用内的资源，如图片和颜色，这允许组件在不同的地方复用时保持资源的一致性。同时，使用CommonConstants来管理字体大小、颜色和间距等样式属性，使得样式的维护和更新更加集中和一致。