HarmonyOS

HarmonyOS

1. 布局

布局是页面的骨架，控制页面内所有元素的排列规则，每个页面build中只能存在一个根布局。

• 线性布局 (Row/Column)

Column：垂直从上至下排列，绝大多数页面外层首选根布局

调整每行间距

Row：水平从左至右排列，一行多按钮、图文并排场景

• 层叠布局 (Stack)
• 组件上下堆叠覆盖，用于图片叠加文字、视频封面、遮罩、浮层标题。
• 
• 弹性布局 (Flex)
• 自适应弹性排列，支持自动换行，一套代码适配手机、平板多尺寸屏幕。
• 
• 相对布局 (RelativeContainer)

通过组件 ID 互相约束位置，适合不规则、复杂自定义页面排版。

• 栅格布局 (GridRow/GridCol)
• 网格均分排版，商品列表、课程多列卡片、图文网格专用
• 
• 动态布局 (DynamicLayout)
• 代码循环动态生成组件，适配后端返回的动态列表数据。
• 
• 容器断点 (ContainerReader)

响应式适配，根据容器宽度自动切换样式，兼容折叠屏、平板。

• 选项卡 (Tabs)
• 顶部 / 底部标签切换多子页面，课程分类、首页多模块切换场景。
• 

1. 文本输入

核心组件：TextInput 用于用户录入账号、密码、搜索文字、备注； 设置type(InputType.Password)可隐藏输入内容，实现密码输入框。

1. 媒体展示

显示图片 (Image)

加载本地 / 网络图片，头像、课程封面、页面配图通用

视频播放 (Video)

支持本地、网络视频播放，自带播放、暂停、进度控制，课程学习页面核心组件。

创建轮播 (Swiper)

首页 Banner 自动滑动轮播，自动循环切换图片 / 页面

1. 按钮选择

按钮 (Button)

页面核心交互，登录、注册、页面跳转、提交、退出

单选框 (Radio)

多选一选择场景，性别、身份、课程分类单选。

切换按钮 (Toggle)

开关样式组件，用于功能开启 / 关闭状态切换

1. 添加组件

进度条

展示视频播放进度、页面加载进度、任务完成进度。

1. 使用弹窗

全局弹窗提示，用于表单校验报错、登录 / 注册成功提示、确认操作弹窗，是页面交互反馈必备组件。