鸿蒙 ArkUI Swiper 轮播 Banner 组件完整实现

、页面基础配置导入路由模块router用于页面跳转Entry、Component标记为注册页独立页面。定义 3 个响应式变量双向绑定输入框内容username存储注册账号password存储第一次输入密码password2存储确认密码二、页面从上至下布局外层垂直 Column组件间距 25圆形头部图片加载本地素材banner1宽高 120圆角 60 裁切为圆形头像样式。注册标题文字「注册」字号 32、加粗居中展示作为页面主标题。账号输入横向分栏区域外层Row左右分配宽度 4:6左侧标签「账号」占 40% 宽度字号 26、文字居中右侧文本输入框占 60% 宽度高 50onChange监听输入内容实时同步至username变量。三、核心知识点页面路由模块导入为注册成功跳转登录页做准备State多响应式变量分别存储账号、两次密码Row 横向百分比分栏布局实现标签 输入框规整排版Image 圆角圆形裁切美化页面头部二、页面从上至下组件二、登录按钮与校验逻辑Entry标记当前SwiperDemo结构体为应用独立页面入口预览器可直接渲染该页面。Component标识结构体为 ArkUI 自定义 UI 组件支持build()构建界面。struct SwiperDemo定义轮播演示页面组件页面所有 UI 内容写在build()内部。最外层采用Column垂直布局容器页面元素自上而下垂直排布整体设置padding(10)页面四周留出 10px 空白内边距页面基础结构EntryComponent标准页面模板、Column垂直基础布局、padding全局留白文本基础样式字号fontSize、字重fontWeight加粗设置Swiper 轮播组件核心 APIindicator分页指示器开关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。条件不成立校验失败一、页面基础配置导入路由模块routerEntry、Component标记HomePage为主页页面声明响应式变量username用于接收上个页面传递过来的账号参数。二、页面生命周期onPageShow页面每次显示时自动执行该生命周期函数作用为接收路由传参通过router.getParams()获取跳转时携带的全部参数类型断言转为键值对象Recordstring, string判断参数存在后将传递过来的username赋值给页面响应式变量数据更新自动刷新 UI。三、页面 UI 渲染最外层垂直Column容器仅展示一段拼接文本你好 ${this.username}模板字符串读取接收的用户名实现登录 / 注册后主页欢迎语效果。四、核心知识点ArkUI 页面生命周期onPageShow页面每次可见都会触发router.getParams()接收跨页面路由传递的参数路由页面间数据传递、参数接收并回显到文本组件State响应式变量接收参数后自动更新页面文字