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

---

前言

        饮食记录页面中的记录列表通常用来记录一些每餐应该吃多少，和每种食物多少热量都会记录。给用户查看和提醒。        

---

一、页面设计

        饮食记录页面其他两部分已经完成，就剩下饮食记录。饮食记录建个列表，可以利用循环ForEach组件去实现内部内容的排列。其中内容都是简单的图片和文字。

二、相关代码

代码如下：

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(){
      ForEach([1,2,3,4,5],(item)=>{
        ListItem(){
          Column(){
            //1.分组的标题
            Row(){
              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})
  }

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

 

3.效果图

---

总结

        ForEach组件是一种常用的循环迭代组件，通常用于遍历数组或列表中的每一个元素，并执行相应的操作。ForEach组件通常与List组件结合使用，循环遍历数据源并将每一项数据展示在列表中。