harmonyos 黑马课程学习记录4-健康生活项目

项目概览：

项目代码：

import { CommonConstants } from '../../common/constants/CommonConstants'
import ItemModel from '../../model/ItemModel'

import ItemCategory from '../../viewmodel/ItemCategory'
import RecordItem from '../../viewmodel/RecordItem'

@Preview
@Component
export default struct ItemList {

  //声名弹出父组件函数(panel)
  showPanel: () => void
  @State isFood: boolean = true //判断是查询食物还是运动

  build() {
    Tabs() {

      //定义标题和内容
      TabContent() {
        this.TabContentBuilder(ItemModel.list(this.isFood)) //调用Itemmmode的接口，进行查询（食物/运动）
      }
      .tabBar('全部')

      TabContent() {
        this.TabContentBuilder(ItemModel.list(this.isFood)) //调用Itemmmode的接口，进行查询（食物/运动）
      }
      .tabBar('主食')

      TabContent() {
        this.TabContentBuilder(ItemModel.list(this.isFood)) //调用Itemmmode的接口，进行查询（食物/运动）
      }
      .tabBar('果蔬')

    }
    .width(CommonConstants.THOUSANDTH_940)
    .height('100%')
  }
  //抽取列表项目
  @Builder TabContentBuilder(items: RecordItem[]) { //定义items，导入列表,相当于把RecordItem格式赋值到items上
    List({ space: CommonConstants.SPACE_10 }) {
      ForEach(items, (item: RecordItem) => { //遍历items//加【】相当于遍历二维数组
        ListItem() {
          Row({ space: CommonConstants.SPACE_4 }) {
            Image(item.image) //赋值
              .width(50)
            Column({ space: CommonConstants.SPACE_4 }) {
              Text(item.name).fontWeight(CommonConstants.FONT_WEIGHT_500)
              Text(`${item.calorie}千卡/${item.unit}`).fontSize(14).fontColor($r('app.color.light_gray'))
            }

            Blank()
            Image($r('app.media.ic_public_add_norm_filled'))
              .width(20)
              .fillColor($r('app.color.primary_color'))
              .margin({ right: 10 })
          }
          .width('100%')
          .backgroundColor(Color.White)
          .borderRadius(15)
          .padding(CommonConstants.SPACE_4)

        }
        .onClick(() => {
          this.showPanel()
        })

      })
    }
    .width('100%')
    .height('100%')
  }
}

1.1：运用的数据关系操作

/**
 * 饮食记录中的记录项，可以是食物或运动
 */
export default class RecordItem{
  /**
   * id
   */
  id: number
  /**
   * 名称
   */
  name: ResourceStr
  /**
   * 图片
   */
  image: ResourceStr
  /**
   * 分类id
   */
  categoryId: number
  /**
   * 包含的卡路里
   */
  calorie: number

  /**
   * 单位
   */
  unit: ResourceStr
  /**
   * 碳水含量，单位（克）
   */
  carbon: number
  /**
   * 蛋白质含量，单位（克）
   */
  protein: number
  /**
   * 脂肪含量，单位（克）
   */
  fat: number

  constructor(id: number, name: ResourceStr, image: ResourceStr,
              categoryId: number, unit: ResourceStr, calorie: number,
              carbon: number = 0, protein: number = 0, fat: number = 0) {//运动是没有营养素的，所以营养素的默认为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
  }
}

//食物类型的枚举
enum FoodCategoryEnum{//默认值和数组脚标一致
 //主食
  STAPLE,
 //蔬果
  FRUIT,
 //肉蛋奶
  MEAT,
 //坚果
  NUT,
//其它
  OTHER,
}

//食物
const foods: RecordItem[] = [//全参构造
  new RecordItem(0, '米饭',$r('app.media.rice'),FoodCategoryEnum.STAPLE, '碗',  209, 46.6, 4.7, 0.5),
  new RecordItem(1, '馒头',$r('app.media.steamed_bun'),FoodCategoryEnum.STAPLE, '个',  114, 24.0, 3.6, 0.6),
  new RecordItem(2, '面包',$r('app.media.bun'),FoodCategoryEnum.STAPLE, '个',  188, 35.2, 5.0, 3.1),
  new RecordItem(3, '全麦吐司',$r('app.media.toast'),FoodCategoryEnum.STAPLE, '片',  91, 15.5, 4.4, 1.3),
  new RecordItem(4, '紫薯',$r('app.media.purple_potato'),FoodCategoryEnum.STAPLE, '个',  163, 42.0, 1.6, 0.4),

]
//运动
const workouts: RecordItem[] = [
  new RecordItem(10000, '散步',$r('app.media.ic_walk'), WorkoutCategoryEnum.WALKING, '小时', 111),
  new RecordItem(10001, '快走',$r('app.media.ic_walk'), WorkoutCategoryEnum.WALKING, '小时',  343),
  new RecordItem(10002, '慢跑',$r('app.media.ic_running'), WorkoutCategoryEnum.RUNNING, '小时',  472),
  new RecordItem(10003, '快跑',$r('app.media.ic_running'), WorkoutCategoryEnum.RUNNING, '小时',  652),

]

class ItemModel {

  // getById(id: number, isFood: boolean = true){
  //   return isFood ? foods[id] : workouts[id - 10000]
  // }
  //查出所有（食物/运动），判断是食物还是运动
  list(isFood: boolean = true): RecordItem[]{ //返回相应数组
    return isFood ? foods : workouts
  }
}