一、布局容器（页面排版基础）

1. 五种基础布局

1. 垂直布局 Column 组件从上到下垂直排列，space 参数统一设置内部组件间距；是我们写登录页、输入回显页面最常用的根布局。

   Column({space:30}){
     Text("标题")
     TextInput({})
   }
   

2. 水平布局 Row 组件从左到右横向排列，常用于「记住密码文字 + 开关」「登录 + 注册双按钮」同行排版。
3. 相对布局 RelativeContainer 通过 ID 指定组件相对位置，适合复杂错位排版，课堂使用较少。
4. 层叠布局 Stack 组件分层堆叠，适合轮播图、浮窗、图片上叠加文字场景。
5. 弹性布局 Flex 可自由控制主轴、交叉轴对齐，自适应屏幕，多端适配常用。

2. 布局核心规则

1. 每个页面有且只能有 1 个根布局（最外层唯一 Column/Row/Stack 等）；
2. 支持布局嵌套：根布局内部可以放其他任意布局，比如 Column 里套 Row、Row 里套 Column；
3. 常用样式统一控制布局：.width()/.height()、.padding()、.borderRadius()、.justifyContent()控制内部对齐。

---

二、常用基础组件（页面可视化元素）

1. 图片 Image 加载本地资源$r("app.media.图片名")，可设置圆形、阴影，登录页顶部 logo 使用。
2. 文本 Text 展示静态文字 / 动态状态文字，可设置字号、字体颜色、对齐方式.textAlign(TextAlign.Start)实现左对齐。
3. 文本输入框 TextInput 接收用户输入，通过text绑定状态变量、.onChange实时同步输入内容，实现输入内容回显功能。
4. 按钮 Button 可点击交互组件，.onClick绑定点击事件；支持动态切换文字（开关按钮）、自定义蓝色圆角样式。
5. 开关 Toggle 两种类型：ToggleType.Switch滑动开关、ToggleType.Checkbox复选框；绑定布尔状态isOn，点击切换开 / 关。
6. 单选框：多选一交互组件，课程仅做概念了解。
7. 选项卡 Tabs：多页面切换导航组件。
8. 轮播图 Swiper：多张图片自动循环滑动。
9. 视频 Video：播放本地 / 网络视频资源。

---

三、掌握知识

1. @State

• 作用：状态装饰器，用来定义响应式变量。
• 核心特性：一旦变量值发生改变，页面中所有绑定该变量的 UI 组件会自动刷新。
• 常用场景：绑定输入框文本、开关布尔状态，实现双向数据绑定。
• 语法示例：

---

2. 弹窗 AlertDialog

• 依赖：需要先导入模块 import AlertDialog from '@ohos.promptAction';
• 用途：表单校验失败、操作出错时弹出提示框，展示标题与文字信息。
• 基础语法：

---

3. 路由 router

• 依赖：导入模块 import router from '@ohos.router';
• 作用：实现多页面之间的跳转，还可以在页面跳转时传递参数。

1.页面跳转

router.pushUrl({url:"pages/目标页面"})

2.跳转并携带参数

router.pushUrl({
  url:"pages/HomePage",
  params:{username:this.username}
})

3.接收上个页面传递过来的数据

onPageShow(){
  let params = router.getParams()
}

---

四、交互事件（监听用户操作）

1. onChange 内容变化事件

适用组件：TextInput、Toggle

• TextInput：用户输入文字时触发，把输入内容赋值给@State变量，实现双向绑定；
• Toggle：点击开关时触发，同步更新布尔状态isOpen。
• 
• 

2. onClick 点击事件

适用组件：Button、Image、Text、Toggle 点击组件后执行大括号内代码：切换开关状态、弹出弹窗、清空输入框、切换文字颜色等。

---

五、综合实操案例串联

1. 登录页面：根布局 Column + Image + Text + TextInput + Row（Toggle + 文字）+ Row（双 Button）+ @State 双向绑定 + Button 点击弹窗；
2. 输入回显页面：Column + TextInput + 底部圆角卡片 Text 回显；
3. 开关切换文字页面：Column + 输入框 + 动态文字 Button + 底部展示文本，通过@State布尔值控制文字内容；
4. Toggle 开关页面：Checkbox/Switch 两种开关，点击切换文字颜色、页面提示文本。

六、高频易错点总结

1. 布局：根布局只能一个，百分比高度不要随意给文字组件，容易内容裁剪；
2. @State：不加该修饰的变量修改后页面不会刷新；
3. 颜色写法：ArkUI 使用十六进制数字0xF5F5F5，不支持#F5F5F5字符串；
4. 事件：onChange传输入值、onClick无参数，两种事件不要混用；
5. 对齐：所有组件统一宽度 +.textAlign(TextAlign.Start)才能实现全部左对齐。