记录：鸿蒙实战案例(源于黑马程序员视频)

苓莘儿

已于 2024-06-27 20:10:26 修改

阅读量234

点赞数 3

文章标签： harmonyos 鸿蒙

于 2024-06-21 21:25:49 首次发布

本文链接：https://blog.csdn.net/2302_77110702/article/details/139854017

版权

学习内容：

观看黑马程序员视频完成记录项部分

学习时间：

2024年6月21日

学习产出：

抽取为数据模型：

一.记录项分类模型

import ItemCategory from '../viewmodel/ItemCategory'

/**
 * 食物类型的枚举
 */
enum FoodCategoryEnum{
  /**
   * 主食
   */
  STAPLE,
  /**
   * 蔬果
   */
  FRUIT,
  /**
   * 肉蛋奶
   */
  MEAT,
  /**
   * 坚果
   */
  NUT,
  /**
   * 其它
   */
  OTHER,
}

/**
 * 食物类型数组
 */
let FoodCategories = [
  new ItemCategory(0, $r('app.string.staple')),
  new ItemCategory(1, $r('app.string.fruit')),
  new ItemCategory(2, $r('app.string.meat')),
  new ItemCategory(3, $r('app.string.nut')),
  new ItemCategory(4, $r('app.string.other_type')),
]

/**
 * 运动类型枚举
 */
enum WorkoutCategoryEnum {
  /**
   * 走路
   */
  WALKING,
  /**
   * 跑步
   */
  RUNNING,
  /**
   * 骑行
   */
  RIDING,
  /**
   * 跳操
   */
  AEROBICS,
  /**
   * 游泳
   */
  SWIMMING,
  /**
   * 打球
   */
  BALLGAME,
  /**
   * 力量训练
   */
  STRENGTH
}

/**
 * 运动类型数组
 */
let WorkoutCategories = [
  new ItemCategory(0, $r('app.string.walking_type')),
  new ItemCategory(1, $r('app.string.running')),
  new ItemCategory(2, $r('app.string.riding')),
  new ItemCategory(3, $r('app.string.aerobics')),
  new ItemCategory(4, $r('app.string.swimming')),
  new ItemCategory(5, $r('app.string.ballgame')),
  new ItemCategory(6, $r('app.string.strength')),
]

export {FoodCategories , WorkoutCategories , FoodCategoryEnum, WorkoutCategoryEnum}

二.记录项类型

在定义好的ItemModel,ItemCategoryModel,ItemCategory,RecordItem基础上去写,

食物的信息：

注意：第四项为所属的类型，所填的为枚举类型，在使用时，将其作为下标去取所对应的类型的值。运动与其类似

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),
  new RecordItem(5, '煮玉米',$r('app.media.corn'),FoodCategoryEnum.STAPLE, '根',  111, 22.6, 4.0, 1.2),
  new RecordItem(6, '黄瓜',$r('app.media.cucumber'),FoodCategoryEnum.FRUIT, '根',  29, 5.3, 1.5, 0.4),
  new RecordItem(7, '蓝莓',$r('app.media.blueberry'),FoodCategoryEnum.FRUIT, '盒',  71, 18.1, 0.9, 0.4),
  new RecordItem(8, '草莓',$r('app.media.strawberry'),FoodCategoryEnum.FRUIT, '颗',  14, 3.1, 0.4, 0.1),
  new RecordItem(9, '火龙果',$r('app.media.pitaya'),FoodCategoryEnum.FRUIT, '个',  100, 24.6, 2.2, 0.5),
  new RecordItem(10, '奇异果',$r('app.media.kiwi'),FoodCategoryEnum.FRUIT, '个',  25, 8.4, 0.5, 0.3),
  new RecordItem(11, '煮鸡蛋',$r('app.media.egg'),FoodCategoryEnum.MEAT, '个',  74, 0.1, 6.2, 5.4),
  new RecordItem(12, '煮鸡胸肉',$r('app.media.chicken_breast'),FoodCategoryEnum.MEAT, '克',  1.15, 0.011, 0.236, 0.018),
  new RecordItem(13, '煮鸡腿肉',$r('app.media.chicken_leg'),FoodCategoryEnum.MEAT, '克',  1.87, 0.0, 0.243, 0.092),
  new RecordItem(14, '牛肉',$r('app.media.beef'),FoodCategoryEnum.MEAT, '克',  1.22, 0.0, 0.23, 0.033),
  new RecordItem(15, '鱼肉',$r("app.media.fish"),FoodCategoryEnum.MEAT, '克',  1.04, 0.0, 0.206, 0.024),
  new RecordItem(16, '牛奶',$r("app.media.milk"),FoodCategoryEnum.MEAT, '毫升',  0.66, 0.05, 0.03, 0.038),
  new RecordItem(17, '酸奶',$r("app.media.yogurt"),FoodCategoryEnum.MEAT, '毫升',  0.7, 0.10, 0.032, 0.019),
  new RecordItem(18, '核桃',$r("app.media.walnut"),FoodCategoryEnum.NUT, '颗',  42, 1.2, 1.0, 3.8),
  new RecordItem(19, '花生',$r("app.media.peanut"),FoodCategoryEnum.NUT, '克',  3.13, 0.13, 0.12, 0.254),
  new RecordItem(20, '腰果',$r("app.media.cashew"),FoodCategoryEnum.NUT, '克',  5.59, 0.416, 0.173, 0.367),
  new RecordItem(21, '无糖拿铁',$r("app.media.coffee"),FoodCategoryEnum.OTHER, '毫升',  0.43, 0.044, 0.028, 0.016),
  new RecordItem(22, '豆浆',$r("app.media.soybean_milk"),FoodCategoryEnum.OTHER, '毫升',  0.31, 0.012, 0.030, 0.016),
]

三.查询信息

1.查询所有

（1）在ItemModel中定义接口，选择查询食物还是运动，true为食物，false为运动

class ItemModel{

 
  //查询所有
  list(isFood: boolean = true): RecordItem[]{
    return isFood ? foods : workouts
  }
  
 
}

（2）在ItemList中修改原本写死的数组信息

在TabContentBuilder中将写死的数据改为items数组的数据

  @Builder TabContentBuilder(items:RecordItem[]){
    List({space:CommonConstants.SPACE_10}){
      ForEach(items,(item:RecordItem)=>{
        ListItem(){
          Row({space:CommonConstants.SPACE_6}){
            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(18)
              .fillColor($r('app.color.primary_color'))
          }
          .width('100%')
          .padding(CommonConstants.SPACE_6)

        }
        .onClick(()=>this.showPanel(item))
      })
    }
    .width('100%')
    .height('100%')

  }

在调用时将需要查询的参数（食物还是运动）传递

this.TabContentBuilder(ItemModel.list(this.isFood))

2.按种类查询

问题：上面的一行可以是食物也可以是运动，两者分类不同，Bar是动态的，其内部的数据也是动态的，不能将其写死。

（1）进一步优化：定义一个类描述数组中元素的结构：

import ItemCategory from './ItemCategory'
import RecordItem from './RecordItem'
export default class GroupInfo{

  type: ItemCategory

  items: RecordItem[]


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

内部数据的格式：

data=[
    //用对象封装
    new GroupInfo(new ItemCategory(0, '主食'),[]),
    new GroupInfo(new ItemCategory(1, '果蔬'),[]),
    new GroupInfo(new ItemCategory(2, '肉蛋奶'),[]),
    new GroupInfo(new ItemCategory(3, '坚果'),[]),
    new GroupInfo(new ItemCategory(4, '其他'),[])
  ]

调用：

ForEach(this.data,(group:GroupInfo)=>{
        TabContent(){
          this.TabContentBuilder(ItemModel.list(this.isFood))
        }
        .tabBar(group.type.name)
      })

（2）根据以上结构定义接口：

1）在ItemModel中创建空的分组，

因为每一个groupInfo对应一个ItemCategory，遍历食物类型数组，运用map将FoodCategories的数组转为groupInfo的数组

2）遍历记录项列表，将食物添加到对应的分组

listItemGroupByCategory(isFood: boolean = true){
    // 1.判断要处理的是食物还是运动
    let categories = isFood ? FoodCategories : WorkoutCategories
    let items = isFood ? foods: workouts
    // 2.创建空的分组
    let groups = categories.map(itemCategory => new GroupInfo(itemCategory, []))
    // 3.遍历记录项列表，将食物添加到对应的分组
    items.forEach(item => groups[item.categoryId].items.push(item))
    // 4.返回结果
    return groups
  }

（3）使用接口：

ForEach(ItemModel.listItemGroupByCategory(this.isFood),(group:GroupInfo)=>{
        TabContent(){
          this.TabContentBuilder(group.items)
        }
        .tabBar(group.type.name)
      })

3.修改panel面板的信息

（1）在ItemList中将点击的item传给ItemIndexPage,将其记录后，再传给ItemCard

.onClick(()=>this.showPanel(item))

注：item 是对象，传对象不能用prop，必须用link，且调用要用$

 if(this.item){
          ItemCard({amount:this.amount,item:$item})//对象要用link传递，用$
        }

@Link item:RecordItem

（2）将 ItemCard的数据变为动态的，当运动时，没有碳水，蛋白质，脂肪的信息，将运动的id改为大于10000，用来判断是否为运动

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){
          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'))
           .fontWeight(CommonConstants.FONT_WEIGHT_600)
         Divider().color($r('app.color.primary_color'))
       }
       .width(150)
       Text(this.item.unit)
         .fontColor($r('app.color.light_gray'))
         .fontWeight(CommonConstants.FONT_WEIGHT_600)

     }

    }