鸿蒙个人项目-饮食记录-统计卡片

---

前言

在当今注重健康和饮食管理的时代，准确记录和分析个人的饮食情况变得越来越重要。为了满足这一需求，我们开发了鸿蒙个人项目中的饮食记录应用，其中的统计卡片系统是该应用的核心功能之一。这个统计卡片系统旨在为用户提供一个直观、清晰且全面的饮食数据概览。通过精心设计的界面和智能的数据分析算法，用户可以快速了解自己的饮食规律、营养摄入情况以及与健康目标的差距。我们深知，每个人对于饮食管理的需求和目标都不尽相同。因此，这个统计卡片系统具备高度的灵活性和个性化设置。无论是想要控制体重、改善营养均衡，还是关注特定营养素的摄入，用户都能根据自己的需求定制统计内容和显示方式。在开发过程中，我们充分利用了鸿蒙操作系统的优势，确保系统的流畅运行和高效性能。同时，注重用户体验，以简洁明了的方式呈现复杂的饮食数据，让用户无需费力就能获取关键信息。通过这个统计卡片系统，我们希望帮助用户更好地认识自己的饮食习惯，为健康生活提供有力的支持和指导。

一、StatsCard组件

代码介绍：

这段代码定义了一个 build 方法，用于构建一个页面的布局和内容。首先，使用 Column 组件进行垂直布局。在这个 Column 中：有一个 Row 组件用于显示日期信息，包括格式化后的日期文本和一个Spinner 样式的图片。文本的颜色和图片的填充颜色都设置为特定的颜色，并且 Row 还添加了点击事件，触发时可能会执行 controller.open 操作，并设置了内边距。接着是一个 Swiper 组件，用于实现滑动切换的效果。其中包含了两个部分：CalorieStats 可能用于展示热量统计相关的信息。NutrientStats 可能用于展示营养素统计的内容。Swiper 组件设置了宽度为 100%，背景颜色为白色，边框圆角，并设置了指示器的选中颜色。整个 Column 组件的宽度设置为 CommonConstants.THOUSANDTH_940 ，背景颜色和边框圆角也进行了相应的设置。总的来说，这段代码构建了一个包含日期信息和统计信息滑动切换的页面布局，通过合理的组件组合和样式设置，为用户提供了直观和交互性良好的界面，可能用于展示饮食记录中的关键统计数据。

代码如下：

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.营养素统计
         NutrientStats()
         }
         .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)
  }

页面实现截图

二、DatePickDialog组件

代码介绍：

这段代码定义了一个名为 DatePickDialog 的结构体。结构体中包含一个 CustomDialogController 类型的控制器 controller ，以及一个默认值为当前日期的 selectedDate 变量。build 方法用于构建对话框的布局和功能。在布局中，使用 Column 组件垂直排列内容。首先是一个 DatePicker 日期选择器组件，设置了起始日期和结束日期，并通过 onChange 事件处理函数在选择日期变化时更新 selectedDate 的值并打印相关信息。接着是一个 Row 组件，包含“取消”和“确定”两个按钮。“取消”按钮背景为浅灰色，点击时关闭对话框。“确定”按钮背景为主要颜色，点击时先将所选日期保存到全局存储，然后关闭对话框。整个布局设置了内边距为 CommonConstants.SPACE_12 。总的来说，这段代码实现了一个带有日期选择功能和操作按钮的对话框，能够处理日期选择的变化，并进行相应的保存和关闭操作。

代码如下：

export default  struct DatePickDialog{
  controller: CustomDialogController
  selectedDate:Date = new Date()
  build(){
    Column(){
      // 1.日期选择器

        DatePicker({
                     start: new Date('2020-1-1'),
                     end: new Date(),
                     selected: this.selectedDate
                   })
        .onChange((value: DatePickerResult) => {
        this.selectedDate.setFullYear(value.year, value.month, value.day)
        console.info('select current date is: ' + JSON.stringify(value))
      })

      // 2.按钮
   Row(){
     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)
  }

}

页面实现截图：

三、CalorieStats

代码介绍：

这段代码定义了一个名为 CalorieStats 的结构体。结构体中包含了三个数值属性：intake（饮食摄入的卡路里）、expend（运动消耗的卡路里）和 recommend（推荐的卡路里摄入量），还定义了一个计算剩余卡路里的方法 remainCalorie 。build 方法用于构建卡路里统计的界面布局。使用 Row 组件进行水平布局，其中包含三个部分：调用 StataBuilder 函数展示饮食摄入的信息。通过 Stack 组件组合了一个环形进度条和剩余可摄入卡路里的统计信息，进度条根据饮食摄入和推荐摄入量进行展示。再次调用 StataBuilder 函数展示运动消耗的信息。Row 组件设置了宽度为 100%，水平对齐方式为均匀分布，并设置了上下内边距。StataBuilder 函数用于构建每个统计项的详细布局，包括标签、数值和可选的提示信息，并设置了相应的字体颜色、大小和粗细等样式。总的来说，这段代码实现了一个卡路里统计的界面，清晰地展示了饮食摄入、可剩余摄入和运动消耗的卡路里信息，并通过合理的布局和样式设置提供了良好的用户呈现效果。

代码如下：

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.StataBuilder('饮食摄入',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.StataBuilder('还可以吃',this.remainCalorie(),`推荐${this.recommend}`)
      }

     //3.运动消耗
      this.StataBuilder('运动消耗',this.expend)
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceEvenly)
    .padding({top: 30, bottom: 35})
  }


  @Builder StataBuilder(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'))
      }
    }
  }
}

代码截图：

四、NutrientStats

代码介绍：

这段代码定义了一个名为 NutrientStats 的结构体。结构体中包含了三种营养素的摄入值（carbon 碳水化合物、protein 蛋白质、far 脂肪）以及它们各自的推荐摄入量。build 方法用于构建营养素统计的界面布局。使用 Row 组件进行水平布局，其中依次调用 StataBuilder 函数分别展示碳水化合物、蛋白质和脂肪的统计信息。Row 组件设置了宽度为 100%，水平对齐方式为均匀分布，并设置了上下内边距。StataBuilder 函数用于构建每个营养素的详细统计布局。通过 Stack 组件组合了环形进度条和具体的摄入与推荐数据，进度条的颜色根据不同的营养素而有所区别。同时还显示了营养素的名称和摄入与推荐的具体数值，并设置了相应的字体颜色、大小和粗细等样式。总的来说，这段代码实现了一个营养素统计的界面，清晰地展示了碳水化合物、蛋白质和脂肪的摄入情况以及与推荐摄入量的对比，并通过合理的布局和样式设置提供了直观的用户呈现效果。

代码如下：

export default struct NutrientStats {


  carbon: number = 23
  protein: number = 9
  far: number = 7

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



  build() {
    Row({space: CommonConstants.SPACE_6}){
    //1.饮食摄入
      this.StataBuilder(
        '碳水化合物',
        this. carbon,
        this.recommendCarbon,
        $r('app.color.carbon_color'))
      this.StataBuilder(
        '蛋白质',
        this. protein,
        this.recommendProtein,
        $r('app.color.protein_color'))
      this.StataBuilder(
        '脂肪',
        this. far,
        this.recommendFar,
        $r('app.color.fat_color'))
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceEvenly)
    .padding({top: 30, bottom: 35})
  }


  @Builder StataBuilder(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.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'))
    }
  }
}

代码截图：

---

总结

第一段代码 DatePickDialog 定义了一个日期选择对话框的结构体。它包含一个自定义对话框控制器和一个默认的当前日期。在构建方法中，使用 Column 布局包含了日期选择器和两个按钮（“取消”和“确定”）。日期选择器设置了起始和结束日期，并处理选择变化事件。按钮具有不同的样式和点击事件，“取消”按钮关闭对话框，“确定”按钮保存所选日期到全局存储并关闭对话框。第二段和第三段代码都是 NutrientStats 结构体。它们定义了营养素（如碳水化合物、蛋白质、脂肪）的摄入量、推荐摄入量等属性。构建方法中使用 Row 布局水平排列各个营养素的统计信息，通过调用 StataBuilder 函数来构建具体的统计展示，包括环形进度条显示摄入比例、具体的摄入与推荐数值以及营养素名称。StataBuilder 函数内部使用 Column 和 Stack 进行更细致的布局和样式设置。总体来说，这三段代码分别实现了日期选择对话框和营养素统计的界面构建及相关功能逻辑。