、页面基础配置

1. 导入路由模块 router，用于页面跳转；@Entry、@Component 标记为注册页独立页面。
2. 定义 3 个响应式变量，双向绑定输入框内容：
   • username：存储注册账号
   • password：存储第一次输入密码
   • password2：存储确认密码

二、页面从上至下布局（外层垂直 Column，组件间距 25）

1. 圆形头部图片 加载本地素材 banner1，宽高 120，圆角 60 裁切为圆形头像样式。
2. 注册标题 文字「注册」，字号 32、加粗，居中展示，作为页面主标题。
3. 账号输入横向分栏区域 外层Row左右分配宽度 4:6：

• 左侧标签「账号」占 40% 宽度，字号 26、文字居中；
• 右侧文本输入框占 60% 宽度，高 50，onChange监听输入，内容实时同步至username变量。

三、核心知识点

1. 页面路由模块导入，为注册成功跳转登录页做准备；
2. @State多响应式变量，分别存储账号、两次密码；
3. Row 横向百分比分栏布局，实现标签 + 输入框规整排版；
4. Image 圆角圆形裁切美化页面头部

二、页面从上至下组件

二、登录按钮与校验逻辑

• @Entry：标记当前SwiperDemo结构体为应用独立页面入口，预览器可直接渲染该页面。
• @Component：标识结构体为 ArkUI 自定义 UI 组件，支持build()构建界面。
• struct SwiperDemo：定义轮播演示页面组件，页面所有 UI 内容写在build()内部。
• 最外层采用Column垂直布局容器，页面元素自上而下垂直排布，整体设置padding(10)，页面四周留出 10px 空白内边距
• 页面基础结构：@Entry+@Component标准页面模板、Column垂直基础布局、padding全局留白；
• 文本基础样式：字号fontSize、字重fontWeight加粗设置；
• Swiper 轮播组件核心 API：
  • indicator：分页指示器开关；
  • autoPlay：自动播放开关；
  • interval：自动切换时长；
  • loop：无限循环播放；
• 组件尺寸控制：百分比宽高、固定像素高度、纯色背景占位图实现简易 Banner；
• 复合布局：标题 + 轮播上下组合，实现首页横幅广告栏标准开发案例

• 一、页面与响应式变量

• 标记为独立登录页面 ImageDemo1，外层Column垂直布局，组件上下间距 30。
• 定义三个响应式变量：
  • isRemb 布尔值：控制记住账号状态；
  • username 字符串：绑定账号输入框；
  • password 字符串：绑定密码输入框。
• 圆形头像图片 加载本地图片，宽高 120，圆角 60 做成圆形，添加红色模糊阴影美化。
• 登录标题 文字「账号登录」，字号 30、加粗，居中展示。
• 账号输入框 通栏宽度、高 50、圆角 12；左侧留白 20，输入内容实时同步给username变量。
• 密码输入框 尺寸、圆角样式和账号框统一，用于填写密码并绑定password。

• 、记住密码开关区域（横向布局）

• 外层Row水平排列，文字与开关间距 20；
• 左侧文字「记住密码」，字号 26；
• 右侧 Switch 开关组件：绑定响应式变量isRemb，开启时为红色；监听切换事件，开关状态实时同步给变量。
• 独立横向容器放置登录按钮，按钮宽度占页面 45%、高 50、字号 20；
• 点击登录触发判断：
  • 条件：账号、密码输入框均不为空；
  • 满足条件：弹出弹窗提示「登录成功」，弹窗消息拼接当前登录用户名；
  • 不满足条件：进入 else 分支（代码未展示，一般提示账号密码不能为空）。

  • 一、登录失败弹窗逻辑

    承接上一段登录按钮 if 判断的 else 分支，当账号或密码为空时，弹出提示弹窗，消息通过模板字符串拼接当前输入的用户名，提示 “用户名 xxx 或密码不正确”。

    二、清空按钮功能

  • 和登录按钮放在同一个横向Row布局内，同样设置宽度占页面 45%、高 50、字号 20，与登录按钮尺寸统一；
  • 点击清空按钮触发逻辑：将username、password两个响应式变量赋值为空字符串，页面上账号、密码输入框内容会同步清空。

  • 三、页面整体容器样式

    最外层垂直容器铺满全屏宽高，四周预留 20px 内边距，内部全部内容水平、垂直居中，完成完整登录页面布局。

  • 一、页面基础与视频控制器

  • 标记为独立页面VideoPlayerDemo；
  • 提前实例化VideoController视频控制器，用于后续手动控制播放暂停。

  • 三、Video 视频播放核心配置

  • 资源配置：加载本地视频cc.mp4，绑定控制器，未播放时显示一张预览封面图；
  • 尺寸：宽度铺满页面，固定高度 220；
  • 播放功能参数：
    • controls(false)：隐藏系统自带播放进度条；
    • autoPlay(false)：页面打开不自动播放；
    • loop(true)：开启循环播放；
    • muted(false)：正常开启视频声音；
    • ImageFit.Contain：完整展示视频画面，不裁剪拉伸；
  • 视频模块底部外边距 15，和下方控制按钮分隔

  • 一、播放控制横向按钮区域

  • 使用Row水平布局承载两个按钮，按钮间距 30，整行铺满屏幕宽度，内容整体居中摆放。
  • 「播放」按钮：点击执行视频控制器start()方法，启动视频播放。
  • 「暂停」按钮：点击执行视频控制器pause()方法，停止视频播放。

  • 三、整体逻辑衔接

    承接上方视频组件代码，完成播放器自定义控制区域，脱离系统原生控件，通过独立按钮手动操控视频播放、暂停。

    二、页面整体容器样式

    最外层垂直Column铺满全屏宽度，整体设置 15px 内边距，页面所有内容和屏幕边缘留出空白，视觉更美观。

  • 

  • 

  • 一、注册按钮基础样式

    按钮文字「立即注册」，宽度铺满页面、高 50、字号 24，放置在确认密码输入框下方。

    二、点击注册完整校验逻辑

    点击按钮触发 if 多条件联合判断，全部满足才跳转页面：

  • 账号username不为空；
  • 第一次密码password不为空；
  • 确认密码password2不为空；
  • 两次输入密码完全相等。

  • 弹出全局提示弹窗AlertDialog：

  • 标题：注册失败
  • 提示文案：两次密码为空或者不一致，并拼接当前输入的用户名展示。

  • 三、核心知识点

  • 多条件逻辑与&&同时校验账号、密码非空 + 密码一致性；
  • router.pushUrl实现页面路由跳转，注册完成跳转登录页；
  • 表单校验失败弹窗提示，模板字符串拼接变量展示用户输入账号；
  • 完整注册页面交互闭环：输入采集→表单校验→页面跳转 / 错误提示

  • 条件成立（校验通过）

    调用路由方法router.pushUrl()，跳转登录页面 pages/RouterLogin。

    条件不成立（校验失败）

  • 一、页面基础配置

  • 导入路由模块router，@Entry、@Component标记HomePage为主页页面；
  • 声明响应式变量username，用于接收上个页面传递过来的账号参数。

  • 二、页面生命周期：onPageShow

    页面每次显示时自动执行该生命周期函数，作用为接收路由传参：

  • 通过router.getParams()获取跳转时携带的全部参数；
  • 类型断言转为键值对象Record<string, string>；
  • 判断参数存在后，将传递过来的username赋值给页面响应式变量，数据更新自动刷新 UI。

  • 三、页面 UI 渲染

    最外层垂直Column容器，仅展示一段拼接文本：你好 ${this.username}，模板字符串读取接收的用户名，实现登录 / 注册后主页欢迎语效果。

    四、核心知识点

  • ArkUI 页面生命周期onPageShow，页面每次可见都会触发；
  • router.getParams()接收跨页面路由传递的参数；
  • 路由页面间数据传递、参数接收并回显到文本组件；
  • @State响应式变量接收参数后自动更新页面文字