健康应用3

卡路里摄入和消耗的统计信息

1. 组件定义：

   • CalorieStats：一个使用@Component标记的结构体，表示卡路里统计组件。

2. 组件属性：

   • intake：饮食摄入的卡路里数值。
   • expend：运动消耗的卡路里数值。
   • recommend：推荐的日常卡路里摄入量，通过CommonConstants.RECOMMEND_CALORIE常量获取。

3. 方法定义：

   • remainCalorie：计算剩余可摄入的卡路里量，即推荐摄入量减去已摄入量再加上消耗量。

4. UI构建：

   • 使用Row布局构建整个组件的UI，并通过space属性设置组件间的间距。
   • 包含三个主要部分：饮食摄入、还可以吃（剩余卡路里）、运动消耗。
   • 对于每个部分，使用StatsBuilder构建器方法来创建标签、数值和可选提示信息。

5. StatsBuilder构建器方法：

   • 接收一个对象，包含标签（label）、数值（value）和可选的提示信息（tips）。
   • 使用Column布局来垂直排列文本组件，显示标签、数值和提示信息。
   • 文本样式包括字体颜色、字重和字号。

6. 进度条组件：

   • 对于"还可以吃"的部分，使用Progress组件展示已摄入卡路里的进度，类型为环形（ProgressType.Ring）。
   • 进度条的宽度、粗细和颜色均可配置。

7. 样式和布局：

   • 组件的宽度设置为100%，使用justifyContent(FlexAlign.SpaceEvenly)在水平方向上均匀分布空间。
   • 设置了顶部和底部内边距。

这个组件的主要功能是展示用户的饮食摄入、运动消耗与推荐摄入量之间的关系，并通过进度条和文本信息直观地反映用户的卡路里摄入情况。

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}){
      // 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'))
      }
    }
  }
}