从鸿蒙 AI 聊天 Demo 学习 ArkUI V2：第一天上手记录

前言

最近开始正式接触 HarmonyOS NEXT 和 ArkUI V2。

因为公司项目里有一套 AI 聊天业务，所以第一天没有选择直接死啃官方文档，而是采用：

业务驱动 + Demo 验证

的方式学习。

今天主要做了两件事：

• 拆解 AI 聊天业务整体数据流
• 自己写 ArkUI V2 Demo 练习核心语法

这篇文章记录一下今天学习过程中理解到的一些内容。

---

一、先理解 AI 聊天业务整体结构

刚开始接触项目时，最懵的是：

页面很多
Builder很多
状态很多

后来发现其实核心结构并不复杂。

整体大概是：

ChatPage
│
├── Provider（AI接口层）
├── ChatConfig（业务配置）
├── Builder（卡片UI插槽）
│
▼
ChatComponent（聊天组件）
│
├── vm（统一状态中心）
├── InputBar（输入层）
├── MessageList（消息展示层）
└── Controller（业务调度层）

---

二、真正理解 AI 聊天数据流

今天最大的收获之一：

是把 AI 聊天的数据流跑通了。

整体流程

用户输入
↓
输入框双向绑定状态
↓
点击发送
↓
Controller.sendMessage()
↓
创建用户消息
↓
push 到 chatHistory
↓
请求 AI
↓
流式返回
↓
push AI消息 / 卡片
↓
MessageList 自动刷新

本质上：

还是“状态驱动 UI”

只是聊天场景里：

状态 = chatHistory

---

三、vm（ViewModel）终于看懂了

以前一直对：

vm
viewModel

这些概念很模糊。

今天终于理解：

vm 本质是统一状态中心。

比如：

输入框

修改：

vm.userInput

而：

消息列表

读取：

vm.chatHistory

Controller：

push 到 vm.chatHistory

然后：

MessageList 自动刷新

这其实就是：

响应式状态共享。

---

四、Builder 插槽是今天最大的收获之一

聊天项目里有很多：

xxxBuilder

刚开始完全看不懂。

后来发现：

本质上就是“UI 插槽”。

整体逻辑

外层页面
│
├── 普通卡片 Builder
├── 混合卡片 Builder
└── Loading Builder
        │
        ▼
聊天组件根据消息类型
调用不同 Builder 渲染 UI

也就是说：

聊天组件本身
不关心业务UI长什么样

它只负责：

• 状态管理
• 消息流
• 生命周期
• 消息调度

真正的 UI：

由外部注入。

这个思想其实很像：

• Vue slot
• React render props

---

五、终于理解 @BuilderParam

今天真正搞懂：

@BuilderParam

它本质就是：

“把 UI 当参数传递”。

比如：

@BuilderParam content: () => void

意思：

“外部传一段 UI 给我”

组件内部：

this.content()

等于：

渲染外部传进来的 UI

这个设计对于大型组件非常重要。

因为：

逻辑
和
UI
可以解耦

---

六、开始真正上手 ArkUI V2

今天正式开始使用：

@ComponentV2

以及：

• @Local
• @Param
• @ObservedV2
• @Trace
• @Builder
• @BuilderParam

---

七、ArkUI V2 响应式理解

@Local

组件自己的状态：

@Local keyword: string = ''

---

@Param

父组件传值：

@Param title: string = ''

父组件：

Child({
  title: 'hello'
})

---

@Builder

抽 UI 片段：

@Builder
ProductRow() {

}

---

@BuilderParam

传 UI 插槽：

@BuilderParam content: () => void

---

八、终于理解鸿蒙布局

之前一直觉得：

Column
Row
Stack

很抽象。

后来自己写 Demo 后发现其实很简单。

---

Column

上下排列

---

Row

左右排列

---

Stack

图层叠加
后面的覆盖前面的

比如：

Stack() {
  A()
  B()
}

实际上：

B 会覆盖在 A 上面

---

九、写了一个商品管理 Demo

为了练习 ArkUI V2。

功能包括：

• 商品列表
• 搜索
• 新增
• 删除
• 修改
• 列表渲染
• 手势
• 生命周期

---

十、第一次真正理解 Diff 和 key

今天一个特别大的收获：

数据变化 ≠ UI一定刷新

比如：

item.name = 'xxx'

有时候 UI不会更新。

后来发现：

和 ForEach 的 key 有关系。

---

ForEach Diff 机制

原来：

(item) => item.id

修改 name 后：

id 没变

框架会复用旧节点。

于是：

UI不刷新

后来改成：

(item) => `${item.id}-${item.name}`

就好了。

因为：

key变化
=
节点重建

今天第一次真正理解：

Diff 更新机制。

---

十一、开始接触 gesture

比如：

.gesture(
  LongPressGesture()
)

意思：

长按手势。

例如：

长按删除商品

开始真正接触移动端交互层。

---

十二、目前已经接触到的知识点

ArkUI V2

• @ComponentV2
• @Local
• @Param
• @ObservedV2
• @Trace
• @Builder
• @BuilderParam

---

布局

• Column
• Row
• Stack

---

列表

• ForEach
• Diff
• key机制

---

生命周期

• aboutToAppear
• aboutToDisappear

---

手势

• LongPressGesture

---

状态驱动

• vm
• chatHistory
• 响应式刷新

---

十三、今天最大的感受

今天最大的感受其实是：

不要硬啃官方文档。

因为很多时候：

只看文档
很难建立整体理解

更有效的方法是：

从业务出发
↓
遇到不会的
↓
查文档
↓
自己写 Demo 验证
↓
再回到业务

这样成长会快很多。

---

十四、下一步计划

接下来准备继续深入：

• 聊天消息列表
• Drawer
• transition 动画
• 生命周期
• 流式消息更新
• Builder 复杂嵌套
• 路由
• MVVM 结构

以及：

继续完善自己的 ArkUI Demo。

---

结尾

虽然现在还有很多不会。

但至少：

已经开始知道：

状态怎么流动
UI怎么更新
组件怎么通信
Builder怎么解耦

这已经算真正开始进入 HarmonyOS 开发了。