饮食记录记录列表

上一篇文章我们已经实现饮食记录页面的绝大部分功能了，那么相对于上一部分呢这一部分就显得非常轻松了

OK直接开干

一、页面分析

嗯图片是有点糊了但是不影响我们分析

我们发现其实就是一个list列表，图片搭配文字，并且还有分组，整体是一个列式布局

二、正式开发

还是一样在record下创建组件

import router from '@ohos.router'
import { CommonConstants } from '../../common/constants/CommonConstants'
import RecordVO from '../../viewmodel/RecordVO'

@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({space: CommonConstants.SPACE_8}){
            // 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({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)
  }
}

经过我们的一顿操作代码也是书写完了，但目前只是具备了最基本的页面，但实际的功能我们下面几篇文章再详细去讲

三、测试

经测试完全没有问题

 OK，我们下篇文章接着讲，我们这里附上黑马程序员饮食记录记录列表的视频链接，文章配合视频更好理解哦。