一、页面布局:
- 首页的所有组件都放在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类型,而不是直接存日期。