黑马健康——饮食记录—统计卡片

最新推荐文章于 2024-07-09 14:39:36 发布

废了的代码师

最新推荐文章于 2024-07-09 14:39:36 发布

阅读量863

点赞数 37

文章标签： ui

本文链接：https://blog.csdn.net/fff12345687/article/details/139920805

版权

一，前言

综合运用本学期所学内容及个人自学知识，使用HarmonyOS 4.0及以上版本开发一款具有实用性和创新性的移动应用软件。

二.应用界面UI

（1）页面UI分析

（2）代码

 import BreakpointType from '../../common/bean/BreanpointType'
import BreakpointConstants from '../../common/constants/BreakpointConstants'
import { CommonConstants } from '../../common/constants/CommonConstants'
import DateUtil from '../../common/utils/DateUtil'
import RecordService from '../../service/RecordService'
import RecordVO from '../../viewmodel/RecordVO'
import StatsInfo from '../../viewmodel/StatsInfo'
import CalorieStats from './CalorieStats'
import DatePickDialog from './DatePickDialog'
import NutrientStats from './NutrientStats'

@Component
export default struct StatsCard {

  @StorageProp('selectedDate') selectedDate: number = DateUtil.beginTimeOfDay(new Date())
  @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_SM

  @Consume @Watch('handleRecordsChange') records: RecordVO[]
  @State info: StatsInfo = new StatsInfo()

  handleRecordsChange(){
    this.info = RecordService.calculateStatsInfo(this.records)
  }

  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({intake: this.info.intake, expend: this.info.expend})
        // 2.2.营养素统计
        NutrientStats({carbon: this.info.carbon, protein: this.info.protein, fat: this.info.fat})
      }
      .width('100%')
      .backgroundColor(Color.White)
      .borderRadius(CommonConstants.DEFAULT_18)
      .indicatorStyle({selectedColor: $r('app.color.primary_color')})
      .displayCount(new BreakpointType({
        sm: 1,
        md: 1,
        lg: 2
      }).getValue(this.currentBreakpoint))
    }
    .width(CommonConstants.THOUSANDTH_940)
    .backgroundColor($r('app.color.stats_title_bgc'))
    .borderRadius(CommonConstants.DEFAULT_18)
  }
}


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

（3）运行效果截图

三.总结

这段代码片段展示了一个Vue.js组件（`StatsCard`）的结构，该组件使用了一种假设的框架或库，该框架或库采用了类似Vue的组合API的语法，并包含了一些自定义装饰器（如`@Component`、`@StorageProp`、`@Consume`、`@Watch`）。这个组件主要用于展示统计数据，包括热量和营养素的统计，并且能够响应不同断点下的布局变化以及与日期选择对话框进行交互。下面是该代码段的详细解析：

组件定义与状态管理：

`@Component`装饰器标志着这是一个Vue组件。

`@StorageProp`装饰器用于从存储中读取和写入数据，这里分别用于`selectedDate`(选定的日期，默认为当前日期的开始时间)和`currentBreakpoint`(当前屏幕断点，默认为小型屏幕)。

`@Consume`装饰器可能暗示着该组件通过某种方式（例如 Vuex 状态管理）消费外部状态，这里是一个名为`records`的记录列表。

`@State`装饰器定义了组件内的响应式状态，这里是`info`，一个保存统计信息的对象实例。

方法定义：

`handleRecordsChange`方法会在`records`变更时被自动调用（由`@Watch`装饰器监听），用于根据最新的记录数据重新计算统计信息。

对话框控制器：

`controller`变量初始化了一个`CustomDialogController`，用于控制日期选择对话框的显示。它使用了`DatePickDialog`组件，并传入了初始选中的日期。

构建UI结构：

`build`方法内部使用了类似Vue模板的语法来构建组件的UI布局。主要包括日期显示行（点击可打开日期选择对话框）、以及一个Swiper组件来切换显示不同的统计信息（热量统计`CalorieStats`和营养素统计`NutrientStats`）。

Swiper的显示数量会根据当前屏幕断点动态调整，这是通过一个自定义的`BreakpointType`类实现的，它根据给定的断点（如sm、md、lg）返回相应的值。