鸿蒙期末-黑马健康4

饮食记录-统计卡片

---

思维导图:

---

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

 

---

代码实现：

import BreakpointType from '../../common/bean/BreanpointType'
import BreakpointConstants from '../../common/constants/BreakpointConstants'
import { CommonConstants } from '../../common/constants/CommonConstants'
import DateUtil from '../../common/utils/DateUtil'
import RecordService from '../../service/RecordService'
import RecordVO from '../../viewmodel/RecordVO'
import StatsInfo from '../../viewmodel/StatsInfo'
import CalorieStats from './CalorieStats'
import DatePickDialog2 from './DatePickDialog2'
import NutrientStats from './NutrientStats'
@Component
export default  struct StatsCard2{

  @StorageProp('selectedDate') selectedDate:number=DateUtil.beginTimeOfDay(new Date())
  @StorageProp('currentBreakpoint')currentBreakpoint:string = BreakpointConstants.BREAKPOINT_SM
  @Consume @Watch('handleRecordsChange') records:RecordVO[]
  @State info:StatsInfo = new StatsInfo()

  handleRecordsChange(){
    this.info=RecordService.calculateStatsInfo(this.records)
  }

  controller:CustomDialogController=new CustomDialogController({
    builder:DatePickDialog2({selectedDate:new Date(this.selectedDate)})
  })
  build(){
    Column(){
      //1 日期信息
      Row(){
        Text(DateUtil.formatDate(this.selectedDate))
          .fontColor($r('app.color.secondary_color'))
        Image($r('app.media.ic_public_spinner'))
          .width(20)
          .fillColor($r('app.color.secondary_color'))
      }
      .padding(CommonConstants.SPACE_8)//边距
      .onClick(()=>this.controller.open())
      //2 统计信息
      Swiper(){
        //2.1 热量统计
        CalorieStats({intake:this.info.intake,expend:this.info.expend})
        //2.2 营养素统计
        NutrientStats({carbon:this.info.carbon,protein:this.info.protein,fat:this.info.fat})
      }
      .width('100%')
      .backgroundColor(Color.White)
      .borderRadius(CommonConstants.DEFAULT_18)
      .indicatorStyle({selectedColor:$r('app.color.primary_color')})
      .displayCount(new BreakpointType({
        sm :1,
        md:1,
        lg:2
      }).getValue(this.currentBreakpoint))
    }
    .width(CommonConstants.THOUSANDTH_940)
    .backgroundColor($r('app.color.stats_title_bgc'))
    .borderRadius(CommonConstants.DEFAULT_18)
  }
}

import { CommonConstants } from '../../common/constants/CommonConstants'
@CustomDialog
export default  struct DatePickDialog2{
  controller:CustomDialogController
  selectedDate:Date=new Date()
  build(){
    Column({space:CommonConstants.SPACE_12}){
      //1 日期选择器
      DatePicker({
        start: new Date('2020-01-01'),
        end: new Date(),
        selected: this.selectedDate
      })
        .onChange((value: DatePickerResult) => {
          this.selectedDate.setFullYear(value.year, value.month, value.day)
        })
      //2 按钮
      Row({space:CommonConstants.SPACE_12}){
        Button('取消')
          .width(120)
          .backgroundColor($r('app.color.light_gray'))
          .onClick(()=>this.controller.close())
        Button('确定')
          .width(120)
          .backgroundColor($r('app.color.primary_color'))
          .onClick(()=>{
            //1 保存日期到全局存储
            AppStorage.SetOrCreate('selectedDate',this.selectedDate.getTime())
            //2 关闭窗口
            this.controller.close()
          })
      }
    }
    .padding(CommonConstants.SPACE_12)
  }
}

 

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default  struct CalorieStats {
  @Prop intake:number//摄入的
  @Prop expend:number//消耗的
  recommend:number=CommonConstants.RECOMMEND_CALORIE//推荐值

  remainCalorie(){
    return this.recommend-this.intake+this.expend
  }

  build() {
    Row({space:CommonConstants.SPACE_6}){//间距为6
      // 1 饮食摄入
      this.StatsBuilder({label:'饮食摄入',value:this.intake})
      // 2 还可以吃
      Stack(){//进度条    层叠关系
        //2.1 进度条
        Progress({
          value:this.intake,
          total:this.recommend,
          type:ProgressType.Ring//环
        })
          .width(120)
          .style({strokeWidth:CommonConstants.DEFAULT_10})//环的粗细
          .color($r('app.color.primary_color'))
        //2.2 统计数据
        this.StatsBuilder({label:'还可以吃',value:this.remainCalorie(),tips:`推荐摄入${this.recommend}`})
      }

      // 3 运动消耗
      this.StatsBuilder({label:'运动消耗',value:this.expend})
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceEvenly)//均匀分布
    .padding({top:30,bottom:35})//内边距
  }

  @Builder StatsBuilder($$:{label:string,value:number,tips?:string}){
    Column({space:CommonConstants.SPACE_6}){
      Text($$.label)
        .fontColor($r('app.color.gray'))
        .fontWeight(CommonConstants.FONT_WEIGHT_600)//粗细
      Text($$.value.toFixed(0))
        .fontSize(20)
        .fontWeight(CommonConstants.FONT_WEIGHT_700)
      if ($$.tips) {
        Text($$.tips)
          .fontSize(12)
          .fontColor($r('app.color.light_gray'))
      }
    }
  }
}

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default  struct NutrientStats {

  @Prop carbon:number//碳水化合物
  @Prop protein:number//蛋白质
  @Prop fat:number//脂肪

  recommendCarbon:number=CommonConstants.RECOMMEND_CARBON
  recommendProtein:number=CommonConstants.RECOMMEND_PROTEIN
  recommendFat:number=CommonConstants.RECOMMEND_FAT


  build() {
    Row({space:CommonConstants.SPACE_6}){//间距为6
      // 1 碳水化合物
      this.StatsBuilder({
          label: '碳水化合物',
          value: this.carbon,
          recommend: this.recommendCarbon,
          color: $r('app.color.carbon_color')
        })
      // 2 蛋白质
      this.StatsBuilder({
        label: '蛋白质',
        value: this.protein,
        recommend: this.recommendProtein,
        color: $r('app.color.protein_color')
      })

      // 3 脂肪
      this.StatsBuilder({
        label: '脂肪',
        value: this.fat,
        recommend: this.recommendFat,
        color: $r('app.color.fat_color')
    })
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceEvenly)//均匀分布
    .padding({top:30,bottom:35})//内边距
  }

  @Builder StatsBuilder($$:{label: string, value: number, recommend: number, color: ResourceStr}){
    Column({space:CommonConstants.SPACE_6}){
      Stack(){
        Progress({
          value:$$.value,
          total:$$.recommend,
          type:ProgressType.Ring//环
        })
          .width(95)
          .style({strokeWidth:CommonConstants.DEFAULT_6})//环的粗细
          .color($$.color)
        Column({space:CommonConstants.SPACE_6}){
          Text('摄入推荐')
            .fontSize(12)
            .fontColor($r('app.color.light_gray'))
          Text(`${$$.value.toFixed(0)}/${$$.recommend.toFixed(0)}`)
            .fontSize(18)
            .fontWeight(CommonConstants.FONT_WEIGHT_600)
        }

      }
      Text(`${$$.label}(克)`)
        .fontSize(12)
        .fontColor($r('app.color.light_gray'))

    }
  }
}

 

---

运行截图：

---

总结

        上述代码主要存在StatsCard2页面及其内部定义的DatePickDialog2，NutrientStats， CalorieStats，用于显示日期选择器和热量统计及营养素统计。