1. Column 垂直布局

• 排列规则：子组件从上至下纵向排列
• 简写示例

ets

Column(){ Text("内容") }.width("100%")

2. Row 水平布局

• 排列规则：子组件从左至右横向排列
• 简写示例

ets

Row(){ Text("内容") }.width("100%")

3. RelativeContainer 相对布局

• 排列规则：通过组件 ID 互相约束定位，自由排布
• 核心：alignRules 约束规则

4. Stack 层叠布局

• 排列规则：子组件堆叠覆盖，后写组件层级在上
• 适用：角标、浮层、图文叠加

5. Flex 弹性布局

• 排列规则：可切换横向 / 纵向主轴，支持自动换行、弹性缩放
• 核心属性：flexDirection 切换横竖方向

---

速记区分

1. Column：纯纵向
2. Row：纯横向
3. RelativeContainer：组件互相参照定位
4. Stack：多层叠加
5. Flex：自适应弹性布局

1. Swiper 轮播图

• 用途：横向 / 纵向多图循环滑动
• 核心属性：autoplay、interval、loop、indicator
• 最简代码

ets

Swiper(){Image($r("app.media.img"))}.autoplay(true).loop(true)

2. Video 视频

• 用途：播放本地 / 网络视频
• 核心属性：src、controls、autoPlay、loop
• 最简代码

ets

Video($r("app.media.video")).controls(true)

3. Image 图片

• 用途：渲染本地、网络图片
• 核心属性：$r 本地资源、url 网络图、objectFit、borderRadius 圆角
• 最简代码

ets

Image($r("app.media.img")).borderRadius(8)

4. Tabs 选项卡

• 用途：多标签页面切换
• 结构：Tabs + TabContent + tabBar
• 核心属性：index、barPosition、onChange
• 最简代码

ets

Tabs({index:this.tabIndex}){TabContent(){}.tabBar("标签")}.onChange(i=>this.tabIndex=i)

5. Text / TextInput

Text 静态文本

• 作用：展示文字
• 属性：fontSize、fontColor、lineHeight

ets

Text("文字").fontSize(16)

TextInput 输入框

• 作用：接收用户输入
• 属性：text、placeholder、type 密码框、onChange

ets

TextInput({text:this.inputText}).onChange(v=>this.inputText=v)

6. Button 按钮

• 三种类型：Normal 普通、Capsule 胶囊、Circle 圆形
• 核心：onClick 点击事件

ets

Button("按钮").onClick(()=>{})

7. Radio 单选框

• 规则：RadioGroup 包裹，同组仅单选

ets

RadioGroup({selected:this.radioVal}){Radio({value:1})}.onChange(v=>this.radioVal=v)

8. Toggle 开关

• 作用：布尔状态切换
• 属性：isOn、onChange

ets

Toggle({isOn:this.toggleState}).onChange(s=>this.toggleState=s)

组件分类

1. 媒体：Swiper、Video、Image
2. 导航：Tabs
3. 文字：Text、TextInput
4. 交互：Button、Radio、Toggle

一、@State 状态装饰器

1. 作用：标记组件内部响应式变量，变量变更时自动刷新 UI
2. 基础写法

ets

@State count: number = 0

1. 核心规则：仅当前组件与子组件可响应更新

---

二、弹窗（弹窗基础组件：AlertDialog、CustomDialog）

1. AlertDialog 系统提示弹窗

ets

AlertDialog.show({ title:"提示", message:"内容", confirm:{value:"确定", action:()=>{}} })

1. CustomDialog 自定义弹窗：自定义 Dialog 组件，通过 dialogController.open () 唤起

---

三、页面路由（页面跳转）

1. 导入路由模块：import router from '@ohos.router'
2. 跳转页面

ets

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

1. 返回上一页

ets

router.back()

---

四、事件回调

1. onChange 数值变更监听

适用组件：输入框、单选、开关、选项卡等值会变化的组件 触发时机：组件选中 / 输入内容发生改变时执行

ets

TextInput({text:this.input}).onChange((val:string)=>{
  // 捕获最新输入值
})

2. onClick 点击事件监听

适用组件：按钮、图片、文本等可点击元素 触发时机：手指点击组件时执行

ets

Button("点击").onClick(()=>{
  // 点击逻辑
})

---

知识点区分速记

1. @State：驱动界面刷新的响应式变量
2. 弹窗：页面浮层提示、自定义弹出面板
3. 路由：多页面之间跳转、返回
4. onChange：监听数据 / 选中值变化
5. onClick：监听用户点击操作