实战案例-数据模型-记录项（源于黑马程序员）

数据模型：饮食统计信息数据模型，饮食记录分组数据模型，饮食记录本身模型和食物、运动信息数据模型（运动没有碳水，蛋白质等数据）。

ItemCategory页面：记录项类型数据模型。

/**
 * 记录项类型
 */
export default class ItemCategory{//数据模型
  /**
   * 类型id
   */
  id: number
  /**
   * 类型名称
   */
  name: ResourceStr

  constructor(id: number, name: ResourceStr) {
    this.id = id
    this.name = name
  }
}

RecordItem页面：记录项数据模型。

/**
 * 饮食记录中的记录项，可以是食物或运动
 */
export default class RecordItem{//通用数据模型
  /**
   * id
   */
  id: number
  /**
   * 名称
   */
  name: ResourceStr
  /**
   * 图片
   */
  image: ResourceStr
  /**
   * 分类id
   */
  categoryId: number
  /**
   * 包含的卡路里
   */
  calorie: number
  /**
   * 单位
   */
  unit: ResourceStr
  /**
   * 碳水含量，单位（克）
   */
  carbon: number
  /**
   * 蛋白质含量，单位（克）
   */
  protein: number
  /**
   * 脂肪含量，单位（克）
   */
  fat: number

  //carbon, protein, fat添加了默认值
  constructor(id: number, name: ResourceStr, image: ResourceStr,
              categoryId: number, unit: ResourceStr, calorie: number,
              carbon: number = 0, protein: number = 0, fat: number = 0) {
    this.id = id
    this.name = name
    this.image = image
    this.categoryId = categoryId
    this.unit = unit
    this.calorie = calorie
    this.protein = protein
    this.fat = fat
    this.carbon = carbon
  }
}

GroupInfo页面：传记录项类型和其数据数组。

import ItemCategory from './ItemCategory'
import RecordItem from './RecordItem'
export default class GroupInfo{//判断列表类型，以及获取其数据数组
  type:ItemCategory
  items:RecordItem[]

  constructor(type:ItemCategory,items:RecordItem[]) {
    this.items=items
    this.type=type
  }
}

ItemCard页面：底部panel页面（面板的数据名称，图片和营养素的信息会随点击的列表项数据而改变）。

import { CommonConstants } from '../../common/constants/CommonConstants'
import RecordItem from '../../viewmodel/RecordItem'
@Component
export default struct ItemCard {//记录项卡片

  @Prop amount:number//状态变量（数量），负责渲染，需要接收
  @Link item:RecordItem//item对象用link传

  build() {
    Column({space:CommonConstants.SPACE_8}){//列式布局
      //1.图片
      Image(this.item.image)
        .width(150)
      //2.名称
      Row(){//为文字添加背景色，使用行布局
        Text(this.item.name)//动态名称
          .fontWeight(CommonConstants.FONT_WEIGHT_700)//字体加粗
      }
      .backgroundColor($r('app.color.lightest_primary_color'))//背景色
      .padding({top:5,bottom:5,left:12,right:12})//背景色和文字的间距
      Divider()//下划线
        .width(CommonConstants.THOUSANDTH_940)//下划线宽度
        .opacity(0.6)//下划线的透明度
      //3.营养素
      Row({space:CommonConstants.SPACE_8}){//行布局
        this.NutrientInfo('热量（千卡',this.item.calorie)
        if (this.item.id < 10000) {//判断是否是食物id，是则给出碳水等数据，否则没有（运动列表）
          this.NutrientInfo('碳水（克）', this.item.carbon)
          this.NutrientInfo('蛋白质（克）', this.item.protein)
          this.NutrientInfo('脂肪（克）', this.item.fat)
        }
      }
      Divider()
        .width(CommonConstants.THOUSANDTH_940)
        .opacity(0.6)
      //4.数量
      Row(){
        Column({space:CommonConstants.SPACE_4}){//数字和下划线为列布局
          Text(this.amount.toFixed(1))//转为一位小数
            .fontSize(50)
            .fontColor($r('app.color.primary_color&#