实战案例 健康饮食统计卡片

一、实验目的

1. 统计页面开发；

2. 业务逻辑开发；

二、应用介绍

本阶段项目实现了一个美食页面统计页面页面，运行界面如图所示。

三、代码结构解读

统计列表第一部分是热量的统计代码：

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}){
      //饮食摄入
      this.StatsBuilder('饮食摄入',this.intake)
      //还可以吃
      Stack(){
        //进度条
        Progress({
          value:this.intake,
          total:this.recommend,
          type:ProgressType.Ring
        })
          .width(120)
          .style({strokeWidth:CommonConstants.DEFAULT_10})
          .color($r('app.color.primary_color'))
        this.StatsBuilder('还可以吃',this.remainCalorie(),`推荐${this.recommend}`)
      }

      //运动消耗
      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)
         .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}){
      //饮食摄入
      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)
          Column(){
            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.无法将value的string类型指派到number类型

解决方法：

由于粗心导致将value类型设置为string类型只要将

中的value：string 设置为number类型即可。

六、你最想分享的亮点

@CustomDialog是一个弹窗组件，DatePicker是日期选择器，APPStorage是整个应用的内部存储就是保存到全局，当你想要使用某一个界面时必须在你想要调用的那一个界面之前加export default。

小结

在完成了饮食健康统计卡片的开发后，我总结出以下几点：

鸿蒙移动开发框架：在开发中，我使用了鸿蒙的开发框架，通过它提供的各种模块和工具，能够快速、高效地进行开发。

数据统计：在统计卡片中，我学会了如何获取、处理和展示数据。这对于了解用户行为和产品运营分析是非常重要的。

UI设计：在制作统计卡片的过程中，我学会了如何设计简洁、易用的用户界面。良好的UI设计能够提升用户体验和使用效率。

数据可视化：统计卡片通常需要展示大量的数据，通过数据可视化技术，我学会了如何将数据以图表、表格等形式直观地展示出来。

代码优化：在开发过程中，我发现了一些代码逻辑不够清晰或效率较低的地方，通过重构和优化，提高了代码的可读性和执行效率。

总的来说，完成这个统计卡片的开发让我收获颇丰，不仅提升了自己的技术水平，也锻炼了自己在解决问题和设计方案时的能力。希望在以后的开发中能够继续努力，不断提升自己的技能和经验。