鸿蒙(HarmonyOS)应用开发实战——全屏登录页面

往期知识点整理

• 鸿蒙（HarmonyOS）北向开发知识点记录~
• 被裁员后，踏上了鸿蒙开发求职之路
• 持续更新中……

介绍

本例介绍各种应用登录页面。

1. 全屏登录页面：在主页面点击跳转到全屏登录页后，显示全屏模态页面，全屏模态页面从下方滑出并覆盖整个屏幕，模态页面内容自定义，此处分为默认一键登录方式和其他登录方式。

效果图预览

使用说明

1. 点击主页面按钮"点击跳转到全屏登录页"，显示全屏模态页面。
2. 不选中"阅读并同意服务协议及个人信息处理规则"，点击一键登录，提示"请先阅读并同意协议"；选中则提示"登录成功"。
3. 点击左下方"其他登录方式"，页面中显示其他登录方式页面。
4. 在手机号输入框输入11位数字后，“发送短信验证码"按钮由灰变蓝，选中"阅读并同意服务协议及个人信息处理规则”，点击"发送短信验证码"按钮，提示"验证码已发送"。
5. 点击左上角返回图标回到一键登录页面，再次点击返回图标收起模态页面。

实现思路

本例涉及的关键特性和实现方案如下：

1. 通过 bindContentCover 组件绑定全屏模态页面，模态页面内容通过@Builder装饰器 自定义。

Button($r('app.string.full_screen_modal_login_description'))
  .fontColor(Color.White)
  .borderRadius($r('app.integer.border_radiu