鸿蒙案例-黑马饮食健康软件（四）

前言

    饮食健康软件可以帮助用户管理自己的饮食习惯，提供营养信息，制定健康饮食计划，甚至跟踪用户的体重和身体状况。本次首先实现的是该软件的统计卡片。

    统计卡片中包含了热量统计和营养素统计，热量统计让用户知道自己食用了多少热量的食物，最好还要食用多少，营养素统计让用户可以清晰的知道自己摄入了多少营养。

---

页面实现-饮食记录-统计卡片

---

遇到的问题及解决方法：

问题：主网页代码没出问题无法正常预览

解决方法：删除除主网页代码之外其他.ets中的@Entry即可正常预览

---

代码实现：

统计卡片：

//统计卡片
import { CommonConstants } from '../../common/constants/CommonConstants'
import DateUtil from '../../common/utils/DateUtil'
import CalorieStats from './CalorieStats'
import DatePickDialog from './DatePickDialog'
import NutrientStats from './NutrientStats'
@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_12)//内边距
      .onClick(()=>this.controller.open())
      //2.统计信息
      Swiper(){
        //2.1 热量统计
        CalorieStats()
        //2.2 营养素统计
        NutrientStats()

      }//滑块视图容器
      .width('100%')
      .backgroundColor(Color.White)
      .borderRadius(CommonConstants.DEFAULT_18)
      .indicatorStyle({selectedColor:$r('app.color.primary_color')})
    }
    .width(CommonConstants.THOUSANDTH_940)//940 百分之九十四
    //卡片高度由内容决定
    .backgroundColor($r('app.color.stats_title_bgc'))//日期
    .borderRadius(CommonConstants.DEFAULT_18)//弧度

  }
}

热量统计：

//热量统计
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(135)
            .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('1384')
        .fontSize(20)//字体大小
        .fontWeight(CommonConstants.FONT_WEIGHT_700)
      if(tips){
        Text('推荐1692')
          .fontSize(12)//字体大小
          .fontColor($r('app.color.light_gray'))
      }

    }
  }
}

营养素统计：

//营养素统计
import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export  default  struct NutrientStats {
  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 }) {
      //1.饮食摄入
      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: Resource) {
    Column({ space: CommonConstants.SPACE_6 }) {
      Stack() {
        Progress({ //环
          value: value,
          total: recommend,
          type: ProgressType.Ring
        })
          .width(90)
          .style({ strokeWidth: CommonConstants.DEFAULT_6 }) //环的粗细
          .color(color) //环的颜色
        Text('摄入推荐')
          .fontSize(12)
          .fontColor($r('app.color.light_gray')) //字体颜色

        Text(`${value.toFixed(0)}/${recommend.toFixed(0)}`)
          .fontSize(20) //字体大小
          .fontWeight(CommonConstants.FONT_WEIGHT_700)


      }

      Text(`${label}(克)`)
        .fontSize(12)
        .fontColor($r('app.color.light_gray')) //字体颜色

    }

  }
}

---

页面效果：

---

总结：

1.aboutToAppear方法是在控制器的视图即将出现时执行。这个方法通常用于在视图即将出现时，进行数据的加载，UI的更新等操作。

2.aspectRatio是宽高比.