一、页面布局:
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、两位小数)。