5.饮食记录——记录列表

5.1 记录列表的UI设计 

我们可以设计为一组然后进行遍历，首先是一个column的容器整体需要一个foreach进行循环以及列表组件list，分为分组的标题，组内记录列表

分组标题有需要一个row容器用foreach进行循环以及列表组件list，组内记录列表需要用foreach进行循环以及列表组件list，同时需要row容器

5.2 记录列表实现

5.2.1 组内标题实现

需要使用foreach进行循环，使用List要注意一定要使用listitem否则会报错

Blank()：空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column时生效。

 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(FontWeight.Bold)
              Text('建议423~592千卡')
                .grayText()
              Blank()
              Text('190').fontColor($r('app.color.primary_color'))
                .fontSize(12)
              Text('千卡')
                .grayText()
              Image($r('app.media.ic_public_add_norm_filled'))
                .width(20)
                .fillColor($r('app.color.primary_color'))
            }

5.2.2 样式

由于早餐午餐晚餐等地方样式一样，我们使用builder定义一个组件

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

}

5.2.3组内记录列表

因为组内记录列表也需要有好几项食物的记录所以我们使用列表组件list以及foreach循环。

 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)})
             })
           }
          }

 5.2.4 侧滑删除的实现

bind 方法用于创建一个新的函数，这个新的函数不论怎么调用，都会有固定的 this 值。这意味着，当你使用 func.bind(this) 时，func 函数的 this 将被永久绑定到当前上下文中的 this 对象上。this.deleteButton.bind(this) 确保了 deleteButton 方法在调用时 this 指向的是当前组件的实例，而不是调用它的元素或者其他对象。

定义一个侧滑组件

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

在每一项listItem后面使用，swipeAction是listItem的一个属性

.swipeAction({end:this.deleteButton.bind(this)})

名称	参数类型	描述
swipeAction	{ start?: CustomBuilder, end?:CustomBuilder, edgeEffect?: SwipeEdgeEffect, }	用于设置ListItem的划出组件。 - start: ListItem向右划动时item左边的组件（List垂直布局时）或ListItem向下划动时item上方的组件（List水平布局时）。 - end: ListItem向左划动时item右边的组件（List垂直布局时）或ListItem向上划动时item下方的组件（List水平布局时）。 - edgeEffect: 滑动效果。 说明： start和end对应的@builder函数中顶层必须是单个组件，不能是if/else、ForEach、LazyForEach语句。

5.3 遇到问题 

页面预览不出来 

预览不出来，然后显示 页面冲突了原因是因为我在调用的时候应该调用另一个页面，但是我调用成了当前页导致预览不出来了。

5.4 运行结果