饮食记录——记录列表

饮食记录——记录列表

接下来我们制作饮食记录的最后一部分内容，纪录列表，纪录列表部分效果图如图所示。

本次我们只简单做出纪录列表的样式，设计出滑动删除图标，其他功能以后再慢慢改进。和头部搜索栏、统计卡片相同，我们将记录列表封装成组件，再饮食记录主页调用。至此饮食记录主页框架已搭建完成。

import RecordList from './RecordList'
import SearchHeader from './SearchHeader'
import StatsCard from './StatsCard'
@Component
export default  struct RecordIndex {
  build() {
    Column(){
      //1.头部搜索栏
      SearchHeader()

      //2.统计卡片
      StatsCard()

      //3.记录列表
      RecordList()
        .layoutWeight(1)


    }.width('100%')
    .height('100%')
    .backgroundColor($r('app.color.index_page_background'))
  }
}

分析纪录列表结构

根据效果图，我们可以看出这一部分是一个列表套表格的结构，早餐、午餐、晚餐、加餐、运动是外层列表，每个列表项里面的食物又可以看作是一个列表，在这里，先将各部分动态值固定，以后再变为动态值。

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({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%')
           .backgroundColor(Color.White)
           .borderRadius(CommonConstants.DEFAULT_18)
           .padding(CommonConstants.SPACE_12)
         }
      })
    }.width(CommonConstants.THOUSANDTH_940)
    .margin({top:10})
    .height('100%')
  }
  //列表的滑动删除按钮
  @Builder deleteButton(){
    Image($r('app.media.ic_public_delete_filled'))
      .width(20)
      .fillColor(Color.Red)
      .margin(5)
  }
}

由于这部分比较简单，不做赘述，需要注意的是用到了之前学过的给；列表项加上滑动删除按钮和如何封装统一的文字样式。

最终效果：