健康生活App ——记录页面

一、页面布局：

 1. 首先是一个头部导航栏，这里包括一个返回按钮和一Text个文本信息，可以通过调用router . back方法返回到历史堆栈中的上一个位置。

2. 其次是多个记录列表，通过Tabs组件可以通过点击标题实现页面内容的切换，从而在点击不同种类的记录时，就会弹出对不同的内容。接下来，是记录项列表，不同种类的记录项都放在不同的List容器中，通过ForEach循环把他们加载出来，显示在页面上。

3. 最后是底部面板，

• 第一部分是底部面板的顶部日期，整体是横向布局放在一个Row容器中，首先是一个文本组建，紧接着是一个image组件。
• 第二部分是记录条目卡片，整体是列式布局放在Column容器中，该容器中包含多个Row容器。第一个Row容器中放置了一个image组件，第二个放置的是Text组件，接着通过使用Divider方法放置一个分割线，接下来又是一个Row容器，该容器放置所选记录项的数量所对应的热量，碳水，蛋白质，脂肪的相关信息，紧接着又使用一个分割线与下面的数字键盘分割开。
• 第三部分是一个数字键盘，使用Gird网格容器。
• 最后一部分是两个按钮，取消和提交按钮。

二、相关知识点和注意事项：

1. 为back按钮添加点击事件时，使用router.back方法，使页面返回到历史堆栈中的上一个位置。

2. 在记录列表中，需要使用Tabs组件，来实现点击标题切换页面内容,TabContent(){}内是内容，tabBar（）内是标题名称。

3. 记录列表使用List容器，将每个列表项放在对应类别的标题中。

4. 创建数字键盘时，需要使用Grid网格容器，需要注意的是使用网格容器必须声明高度，因为它的行列宽高度是按照比例划分的。键盘无须定义行数，只定义列数就可以，元素会自己往下排。在点击数值时，需要拼接用户输入的内容，也需要校验输入格式是否正确（1、只有一个小数点2、两位小数）。