• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 构建食物数据模型
2
3在创建视图中，我们逐一去表述食物的各个信息，如食物名称、卡路里、蛋白质、脂肪、碳水和维生素C。这样的编码形式在实际的开发中肯定是不切实际的，所以要创建食物数据模型来统一存储和管理数据。
4
5
6![zh-cn_image_0000001215433095](figures/zh-cn_image_0000001215433095.png)
7
8
91. 新建model文件夹，在model目录下创建FoodData.ets。
10
11   ![zh-cn_image_0000001195119619](figures/zh-cn_image_0000001195119619.png)
12
132. 定义食物数据的存储模型FoodData和枚举变量Category，FoodData类包含食物id、名称（name）、分类（category）、图片（image）、热量（calories）、蛋白质（protein）、脂肪（fat）、碳水（carbohydrates）和维生素C（vitaminC）属性。
14   ArkTS语言是在ts语言的基础上的扩展，同样支持ts语法。
15
16   ```ts
17   enum Category  {
18     Fruit,
19     Vegetable,
20     Nut,
21     Seafood,
22     Dessert
23   }
24
25   let NextId = 0;
26   class FoodData {
27     id: string;
28     name: string;
29     image: Resource;
30     category: Category;
31     calories: number;
32     protein: number;
33     fat: number;
34     carbohydrates: number;
35     vitaminC: number;
36
37     constructor(name: string, image: Resource, category: Category, calories: number, protein: number, fat: number, carbohydrates: number, vitaminC: number) {
38       this.id = `${ NextId++ }`;
39       this.name = name;
40       this.image = image;
41       this.category = category;
42       this.calories = calories;
43       this.protein = protein;
44       this.fat = fat;
45       this.carbohydrates = carbohydrates;
46       this.vitaminC = vitaminC;
47     }
48   }
49   ```
50
513. 存入食物图片资源。在resources >base> media目录下存入食物图片资源，图片名称为食物名称。
52
534. 创建食物资源数据。在model文件夹下创建FoodDataModels.ets，在该页面中声明食物成分数组FoodComposition。以下示例创建了两个食物数据。
54
55   ```ts
56   const FoodComposition: any[] = [
57     { 'name': 'Tomato', 'image': $r('app.media.Tomato'), 'category': Category.Vegetable, 'calories': 17, 'protein': 0.9, 'fat': 0.2, 'carbohydrates': 3.9, 'vitaminC': 17.8 },
58     { 'name': 'Walnut', 'image': $r('app.media.Walnut'), 'category': Category.Nut, 'calories': 654 , 'protein': 15, 'fat': 65, 'carbohydrates': 14, 'vitaminC': 1.3 }
59     ]
60   ```
61
62   实际开发中，开发者可以自定义更多的数据资源，当食物资源很多时，建议使用[数据懒加载LazyForEach](../quick-start/arkts-rendering-control.md#数据懒加载)。
63
645. 创建initializeOnStartUp方法来初始化FoodData的数组。在FoodDataModels.ets中使用了定义在FoodData.ets的FoodData和Category，所以要将FoodData.ets的FoodData类export，在FoodDataModels.ets内import FoodData和Category。
65   ```ts
66   // FoodData.ets
67   export enum Category {
68    ......
69   }
70   export class FoodData {
71     ......
72   }
73   // FoodDataModels.ets
74   import { Category, FoodData } from './FoodData'
75
76   export function initializeOnStartup(): Array<FoodData> {
77     let FoodDataArray: Array<FoodData> = []
78     FoodComposition.forEach(item => {
79       FoodDataArray.push(new FoodData(item.name, item.image, item.category, item.calories, item.protein, item.fat, item.carbohydrates, item.vitaminC ));
80     })
81     return FoodDataArray;
82   }
83   ```
84
85
86已完成好健康饮食应用的数据资源准备，接下来将通过加载这些数据来创建食物列表页面。
87
88## 相关实例
89针对构建食物分类列表页面和食物详情页，有以下相关实例可供参考：
90- [DefiningPageLayoutAndConnection:页面布局和连接（ArkTS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/OpenHarmony-3.2-Release/ETSUI/DefiningPageLayoutAndConnection)
91