健康生活App—欢迎页面

一、页面完成效果、页面布局：

页面布局：页面整体是一个列式布局，放在一个column()容器中。

页面中部需要放置一个image组件，放到一个Row容器中；下面是一个Image组件放置logo和三个Text组件。

二、页面创建主要步骤：

(一)页面基础组件设置：

1. 创建column容器；

2. 添加Image组件，将欢迎图片放在页面中部。

3. 添加Image组件，将黑马程序员的logo添加进去。

4. 添加三个Text组件，其中第一个Text组件需要注意，调用Text组件的border()方法，为文本设置框，并通过BorderStyle.solid定义边框线为实线，通过radius：15将边框线设置为弧形。

(二)自定义隐私协议弹窗

1. 创建UserPrivacyDialog文件。

2. 设置监控器controller：自定义隐私协议弹窗组件，必须要有controller组件，且它的类型必须为CustomDialogController类型，是自定义弹窗组件控制器，用来控制弹窗的状态。等到使用这个组件的时侯再初始化。

3. 自定义隐私弹窗中包含的组件为一个两个Text组件、两个Button组件，其中Button组件，需要添加监听器，点击按钮时需要做出相应操作。不过此时，只需要声明，后续进行完善。

4.在Welcomepages中添加生命周期函数aboutToAppear()，注意，因为函数内部加载首选项是异步操作，所以在函数名前需要添加async。

 4.1.加载首选项：这是一个异步操作，需要使用await进行等待。参数列表中，默认初始化为false。

 4.2.判断用户是否同意隐私协议：

•   如果isagree为true，则通过justToIndex跳转到首页，下次打开app时，显示首页，不再出现用户隐私协议弹窗。
• 如果isagree为false，则该弹窗仍处于open打开状态，下次打开应用时，仍然会弹出。

三、注意：

1. 在entryability.ets文件中，将最先显示页面修改为pages/WelcomePages。这样打开app显示的第一个页面不再是Index首页，而是WelcomePages页面。

2. 其中的图片、颜色、字体大小、间距space、宽度width等均保存在CommonConstants中，可以直接调用。

3.自定义弹窗组件必须使用@CustomDialog装饰器，且添加CostumDialogController类型的监控器controller。

4.优化：可以将公共部分抽取出来，比如Image、Text等组件的部分属性，但并不是都有这些属性，可以使用@Extend装饰器将公共部分抽取处来，简化页面。

四、可能遇到的问题及解决办法:

问题：解决方法：设置权重 五、成果展示