鸿蒙实战案列-饮食记录-统计卡片

---

前言

提示：这里可以添加本文要记录的大概内容：

        随着科技的逐步发展，生活节奏会越来越快，人们常常会忘记一些事情。这个统计卡片会帮助用户记录摄入了多少热量 ，又消耗了多少。还会为用户推荐应该摄入多少碳水化合物、蛋白质、脂肪等营养素。

---

一、页面设计

        饮食记录-统计卡片这一部分可以看到它其实也是一个从上到下的列式布局。第一行是一个日期的展示，同时还有一个小按钮，这个按钮在我们点击的时候，会弹出一个日期选择的窗口，让我们去选择一个日期。接下来的饮食统计，展示的是选择这一天的统计和详情信息。这个统计信息分成两部分，第一部分是这个是热量统计，就是当天饮食摄入了多少的卡路里，又运动消耗了多少，推荐总共能摄入多少，还可以吃多少等。除此以外还有个统计，这里有一个营养素的统计卡片，这里边就是碳、水、蛋白质、脂肪等每一种营养素的推荐值和已经摄入的值。

二、相关代码

import { CommonConstants } from '../../common/constants/CommonConstants'
import DateUtil from '../../common/utils/DateUtil'
import CalorieStats from './CalorieStats'
import DatePickDialog from './DatePickDialog'
import Nutrient from './Nutrient'

@CustomDialog
export default struct StatsCard {

  @StorageProp('selectedDate')selectedDate: number = DateUtil.beginTimeOfDay(new Date())

  controller:CustomDialogController = new CustomDialogController({
    builder:DatePickDialog({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()
        //2.2.营养素组件
        Nutrient()
      }
      .width('100%')
      .backgroundColor(Color.White)
      .borderRadius(CommonConstants.DEFAULT_18)
      .indicatorStyle({selectedColor:$r('app.color.primary_color')})
    }
    .width(CommonConstants.THOUSANDTH_940)
    .backgroundColor($r('app.color.stats_title_bgc'))
    .borderRadius(CommonConstants.DEFAULT_18)
  }
}

1.日期卡片

import { CommonConstants } from '../../common/constants/CommonConstants'
@CustomDialog
export default struct DatePickDialog {
  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)
  }
}

2.热量组件 CalorieStats()

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct CalorieStats {
  intake:number=192
  expend:number=150
  recommend:number = CommonConstants.RECOMMEND_CALORIE
  remainCalorie(){
    return this.recommend - this.intake + this.expend
  }
  build() {
    Row({space:CommonConstants.SPACE_6}){
        //1.饮食摄入
       this.StatsBuilder('饮食摄入',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('还可以吃',this.remainCalorie(),`推荐${this.recommend}`)
      }

        //3.运动消耗
        this.StatsBuilder('运动消耗',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)
          .fontWeight(CommonConstants.FONT_WEIGHT_700)
      }
    }
  }
}

3.营养素组件 Nutrient()

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct Nutrient {
  carbon:number=23
  protein:number=9
  fat:number=7

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

  build() {
    Row({space:CommonConstants.SPACE_6}){
       this.StatsBuilder('碳水化合物',
         this.carbon,
         this.recommendCarbon,
         $r('app.color.carbon_color')
       )
      this.StatsBuilder('蛋白质',
        this.protein,
        this.recommendProtein,
        $r('app.color.protein_color')
      )
      this.StatsBuilder('脂肪',
        this.fat,
        this.recommendFat,
        $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(90)
          .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'))
    }
  }
}

三、效果图

---

总结

        整个统计卡片部分要做的几个功能，要用到DatePicker组件和 Swiper组件。其中DatePicker 组件是一种用户界面元素，用于允许用户选择日期和时间。而Swiper组件则提供了两个卡片来回滑动的效果，Swiper组件在预览时其中一定要有值，否则会卡死。