鸿蒙期末-黑马健康5

饮食记录-记录列表

---

思维导图:

---

该页面整体为三部分，第一部分为头部搜索框由Search和Image构成，第二部分为日期选择器和滑动建议窗由Text和Swiper组成其中Text需加DatePicker来实现日期选择器功能，第三部分为列表栏由List组成。

 

---

代码实现：

import { CommonConstants } from '../../common/constants/CommonConstants'
import RecordService from '../../service/RecordService'
import GroupInfo from '../../viewmodel/GroupInfo'
import RecordType from '../../viewmodel/RecordType'
import RecordVO from '../../viewmodel/RecordVO'
import router from '@ohos.router'

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

@Component
export default  struct RecordList {

  @Consume @Watch('handleRecordsChange') records:RecordVO[]
  @State groups:GroupInfo<RecordType,RecordVO>[] =[]
  handleRecordsChange(){
    this.groups=RecordService.calculateGroupInfo(this.records)
  }



  build() {
    List({space:CommonConstants.SPACE_10}){
      ForEach(this.groups,(group:GroupInfo<RecordType,RecordVO>)=>{
        ListItem(){
          Column(){
            //1 分组的标题
            Row({space:CommonConstants.SPACE_4}){
              Image(group.type.icon).width(24)
              Text(group.type.name).fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_700)
              Text(`建议${group.type.min}~${group.type.max}千卡`).grayText()
              Blank()
              Text(group.calorie.toFixed(0)).fontColor($r('app.color.primary_color')).fontSize(14)
              Text('千卡').grayText()
              Image($r('app.media.ic_public_add_norm_filled'))
                .width(20)
                .fillColor($r('app.color.primary_color'))
            }
            .width('100%')
            .onClick(()=>{
              router.pushUrl({
                url:'pages/ItemIndex',
                params:{type:group.type}
              })
            })

            //2 组内记录列表
            List(){
              ForEach(group.items,(item:RecordVO)=>{
                ListItem(){
                  Row({space:CommonConstants.SPACE_6}){
                    Image(item.recordItem.image).width(50)
                    Column({space:CommonConstants.SPACE_4}){
                      Text(item.recordItem.name).fontWeight(CommonConstants.FONT_WEIGHT_500)
                      Text(`${item.amount}${item.recordItem.unit}`).grayText()
                    }
                    Blank()//空格
                    Text(`${item.calorie.toFixed(0)}千卡`).grayText()//toFixed(0)取整

                  }
                  .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)
    .margin({top:10})//与顶部的距离
    .height('100%')//内部高度为100%（在整体高度为1的前提下）



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


}

---

运行截图：

 

---

总结

        上述代码主要存在RIndex中定义的RecordList页面，用于显示记录列表。