实战案例-饮食记录-记录列表（源于黑马程序员）

RecordIndex页面：

//在页面顶部导入RecordList
import StatsCard from './StatsCard'

      //3.记录列表
      RecordList()
        .layoutWeight(1)//占剩余页面

RecordList页面：

import { CommonConstants } from '../../common/constants/CommonConstants'

@Extend(Text) function graText() {//text文本的通用样式
  .fontSize(14)
  .fontColor($r('app.color.light_gray'))//浅灰色
}
@Component
export default struct RecordList {//导出RecordList
  build() {
    List({space:CommonConstants.SPACE_10}){//行内元素间距
      ForEach([1,2,3,4,5],(item)=>{//循环渲染(5组数据）
        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千卡')
                .graText()
              Blank()//空白
              Text('190')
                .fontSize(14)
                .fontColor($r('app.color.primary_color'))//字体颜色绿色
              Text('千卡')
                .graText()
              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片')
                        .graText()
                    }
                    Blank()
                    Text('91千卡')
                      .graText()
                  }
                  .width('100%')
                  .padding(CommonConstants.SPACE_6)
                }.swipeAction({end:this.deleteButton.bind(this)})//侧滑组件
              })
            }
          }
          .width('100%')
          .backgroundColor(Color.White)
          .borderRadius(CommonConstants.DEFAULT_18)//边框弧度
          .padding(CommonConstants.SPACE_12)//内部元素的内边距
        }
      })
    }
    .width(CommonConstants.THOUSANDTH_940)
    .margin({top:10})//顶部间距
  }

  @Builder deleteButton(){//侧滑删除按钮
    Image($r('app.media.ic_public_delete_filled'))
      .width(20)
      .fillColor(Color.Red)//填充颜色
      .margin(5)//与其他元素的间距
  }
}

运行结果：（可滑动列表，也有侧滑删除按钮，但不可实现）