一、布局容器页面承载规则基础规则所有页面只能有 1 个根布局容器根布局内部可以无限嵌套其他布局用来实现复杂页面排版。1. 垂直布局 Column概念子组件从上到下垂直排列是表单、登录页、长列表最常用布局支持space设置子组件间距、justifyContent控制垂直对齐。2. 水平布局 Row概念子组件从左到右水平排列用于导航栏、按钮并排、一行多元素场景。3. 相对布局 RelativeContainer概念通过alignRules设置组件相对位置组件可以互相参照摆放适合不规则自由排版。4. 层叠布局 Stack概念子组件沿 Z 轴堆叠后写的组件覆盖在先写组件上方适合轮播、弹窗、图片叠加文字场景。5. 弹性布局 Flex概念强化版 Row/Column支持自动换行、均分宽度、自适应尺寸适合多元素自动适配屏幕。二、基础 UI 组件1. 轮播图 Swiper概念横向滑动切换多张图片 / 内容首页广告图常用组件。2. 视频 Video概念播放本地 / 网络视频资源支持暂停、进度控制。3. 图片 Image概念展示本地、网络图片支持缩放、圆角。4. 选项卡 Tabs概念多页面标签切换底部导航、分类页面核心组件。5. 文本 / 输入框 Text / TextInputText静态文字展示TextInput接收用户输入6. 按钮 Button概念可点击交互组件绑定onClick实现点击逻辑。7. 单选框 Radio概念多选一选择组件配合 RadioGroup 使用。8. Toggle 开关组件概念布尔切换开关开启 / 关闭用于设置类功能。三、状态管理 State概念State是 ArkTS 核心响应式装饰器修饰变量后变量值发生修改时绑定该变量的 UI 会自动刷新用于存储页面内局部可变数据输入框文字、开关状态、计数等。四、事件交互1. onChange 数据变化事件概念监听组件数据改变触发回调常用于输入框、单选框、开关实时捕获用户输入 / 选择变化。2. onClick 点击事件概念监听组件点击操作按钮、文字、图片都可绑定执行跳转、修改状态、弹窗等逻辑。五、拓展掌握知识点1. 弹窗 PromptAction概念弹出提示框、确认框、Toast 轻提示用于消息反馈、二次确认。2. 页面路由 Router概念实现多页面之间跳转项目所有页面必须在main_pages.json注册路径支持前进、返回、页面传参。示例1、页面 ALogin.ets跳转页面 BIndex.ets2、目标页面 Index.ets 返回上一页3、main_pages.json 路由注册配置必须配置否则跳转失效