健康生活App —— app首页2

一、页面布局：

• 首页的所有组件都放在Column容器中，且宽度、高度均为100%。
• 首先，是一个头部搜索栏SearchHeader，需要借助Search组件；右侧还有一个信件图片以及未读消息条数，需要借助Badge组件。
• 其次，是一个日期弹窗，需要借助日期选择器DatePicker组件，可以可以拖动来切换日期。
• 然后，是一个统计卡片该卡包括日期信息和统计信息。其中，统计信息需要借助Swiper轮播图组件。
• 最后，是一个记录列表，放在List容器内，该列表主要分为分组的标题和组内记录列表两部分。

二、主要内容和相关知识点：

1. 生命周期函数：使用生命周期函数在打开页面之前对数据进行加载。

2. Search组件：这是搜索栏组件，可以通过placeholder设置搜索栏的提示信息。

3.Badge组件：该组建可以附加在单个组件上，是用于信息标记的容器组件，需要传入的参数有，count设置提示消息数，position设置提示点显示的位置，style可以用来设置组件的样式属性，包括文本颜色，尺寸，远点颜色和尺寸等。

4. 使用@StorageProp装饰器，存储变量的键值，对变量做持久化处理。需要注意@StorageProp是单向的@StorageLink是双向的。

5. 使用@Watch装饰器，当监视的变量发生变化时，就会执行监视器内的函数。

6. Swiper组件：这是一个滑动容器，形成轮播图。

7.borderRadius属性：用来设置卡片弧度。

8. 查询与当前seleteDate属性值相匹配时，这个动作是一个异步操作，需要使用await关键字进行等待，在使用await关键字时，需要在这个生命周期函数前加上async。

9. 日期选择器DatePicker组件：由于这是一个弹窗组件，所以需要在开头加上@CustomDialog自定义对话框控制件，他可以帮助开发人员快速创建各种各样的对话框，包括提示框、确定框、输入框等。

• 使用弹窗时需要添加CustomDialogController类型的控制器，来控制台弹窗的开关。
• 在日期选择器DatePicker中，需要添加三个参数（都是Date类型）：start指定选择器的起始日期（默认日期是1970-1-1）、end指定选择器的结束日期（默认值是2100-12-31）以及selected设置选中项的日期（默认值是当前系统日期）。
• 通过两个按钮Button组件来控制日期选择器，需要注意的是选择的日期要使用全局存储AppStorage，这样才可以在整个页面的任何地方都看到，方便后续在其他页面中调用该日期以及它的记录项。注意将日期进行全局存储时保存的是它的毫秒数number类型，而不是直接存日期。