03.1
声明式心智模型
ArkUI 用声明式范式：你描述"状态到 UI 的映射"，框架在状态变化时高效更新界面，无需手动改控件。
@Entry 与 @Component
@Entry 标记页面入口组件，@Component 标记自定义组件，build() 返回组件描述。
03.2
组件与 build
用内置组件（Text/Button/Column/Row）组合出界面，build 中声明结构。
@Entry @Component
struct Index {
build() {
Column() {
Text("欢迎").fontSize(24)
Button("确认").onClick(() => {})
}.padding(16)
}
}03.3
状态装饰器
@State 触发自身组件刷新；@Prop/@Link 用于父子同步；@Observed/@ObjectLink 观察嵌套对象。
| 装饰器 | 作用域 | 同步方式 |
|---|---|---|
| @State | 组件私有 | 自身刷新 |
| @Prop | 父→子 | 单向 |
| @Link | 父↔子 | 双向 |
| @Provide/@Consume | 跨层级 | 双向 |
03.4
布局
Column（纵向）、Row（横向）、Flex、Stack（堆叠）、Grid 与 RelativeContainer 表达各种布局。
Row({ space: 12 }) {
Text("A"); Text("B")
}.justifyContent(FlexAlign.Center)03.5
列表
ForEach + List 渲染可滚动列表，key 需稳定以保证高效更新。
List() {
ForEach(this.items, (it) => {
ListItem() { Text(it.name) }
}, (it) => it.id)
}03.6
事件
onClick/onChange/手势等事件直接挂在组件上，回调中更新状态。
TextInput({ placeholder: "请输入" })
.onChange((v) => this.text = v)03.7
动画与转场
用 animateTo 或属性动画让状态变化带过渡，组件增删用转场。
animateTo({ duration: 300 }, () => { this.expanded = !this.expanded })03.8
常见陷阱
多因 key 不唯一或用了索引。务必提供稳定唯一 key，否则框架无法正确复用 ListItem。
@State 观察的是引用，改内部属性不触发。用 @Observed + @ObjectLink，或整体替换对象引用。
03.9