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

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；
• 实操场景：
  • @State msg:string=""：绑定输入框，实时回显输入文字；
  • @State isOpen:boolean=false：绑定 Toggle / 按钮，切换开关状态、动态修改文字颜色。
• 语法规范：仅在@Entry @Component页面内使用。

四、交互事件

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)才能实现全部左对齐。