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

前言

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

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

txt 复制代码

业务驱动 + Demo 验证

的方式学习。

今天主要做了两件事：

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

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

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

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

txt 复制代码

页面很多
Builder很多
状态很多

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

整体大概是：

txt 复制代码

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

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

今天最大的收获之一：

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

整体流程

txt 复制代码

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

本质上：

还是"状态驱动 UI"

只是聊天场景里：

txt 复制代码

状态 = chatHistory

三、vm（ViewModel）终于看懂了

以前一直对：

txt 复制代码

vm
viewModel

这些概念很模糊。

今天终于理解：

vm 本质是统一状态中心。

比如：

txt 复制代码

输入框

修改：

ts 复制代码

vm.userInput

而：

txt 复制代码

消息列表

读取：

ts 复制代码

vm.chatHistory

Controller：

ts 复制代码

push 到 vm.chatHistory

然后：

txt 复制代码

MessageList 自动刷新

这其实就是：

响应式状态共享。

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

聊天项目里有很多：

ts 复制代码

xxxBuilder

刚开始完全看不懂。

后来发现：

本质上就是"UI 插槽"。

整体逻辑

txt 复制代码

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

也就是说：

txt 复制代码

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

它只负责：

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

真正的 UI：

由外部注入。

这个思想其实很像：

Vue slot
React render props

五、终于理解 @BuilderParam

今天真正搞懂：

ts 复制代码

@BuilderParam

它本质就是：

"把 UI 当参数传递"。

比如：

ts 复制代码

@BuilderParam content: () => void

意思：

txt 复制代码

"外部传一段 UI 给我"

组件内部：

ts 复制代码

this.content()

等于：

txt 复制代码

渲染外部传进来的 UI

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

因为：

txt 复制代码

逻辑
和
UI
可以解耦

六、开始真正上手 ArkUI V2

今天正式开始使用：

txt 复制代码

@ComponentV2

以及：

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

七、ArkUI V2 响应式理解

@Local

组件自己的状态：

ts 复制代码

@Local keyword: string = ''

@Param

父组件传值：

ts 复制代码

@Param title: string = ''

父组件：

ts 复制代码

Child({
  title: 'hello'
})

@Builder

抽 UI 片段：

ts 复制代码

@Builder
ProductRow() {

}

@BuilderParam

传 UI 插槽：

ts 复制代码

@BuilderParam content: () => void

八、终于理解鸿蒙布局

之前一直觉得：

txt 复制代码

Column
Row
Stack

很抽象。

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

Column

txt 复制代码

上下排列

Row

txt 复制代码

左右排列

Stack

txt 复制代码

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

比如：

ts 复制代码

Stack() {
  A()
  B()
}

实际上：

txt 复制代码

B 会覆盖在 A 上面

九、写了一个商品管理 Demo

为了练习 ArkUI V2。

功能包括：

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

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

今天一个特别大的收获：

数据变化 ≠ UI一定刷新

比如：

ts 复制代码

item.name = 'xxx'

有时候 UI不会更新。

后来发现：

和 ForEach 的 key 有关系。

ForEach Diff 机制

原来：

ts 复制代码

(item) => item.id

修改 name 后：

txt 复制代码

id 没变

框架会复用旧节点。

于是：

txt 复制代码

UI不刷新

后来改成：

ts 复制代码

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

就好了。

因为：

txt 复制代码

key变化
=
节点重建

今天第一次真正理解：

Diff 更新机制。

十一、开始接触 gesture

比如：

ts 复制代码

.gesture(
  LongPressGesture()
)

意思：

长按手势。

例如：

txt 复制代码

长按删除商品

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

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

ArkUI V2

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

布局

Column
Row
Stack

列表

ForEach
Diff
key机制

生命周期

aboutToAppear
aboutToDisappear

手势

LongPressGesture

状态驱动

vm
chatHistory
响应式刷新

十三、今天最大的感受

今天最大的感受其实是：

不要硬啃官方文档。

因为很多时候：

txt 复制代码

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

更有效的方法是：

txt 复制代码

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

这样成长会快很多。

十四、下一步计划

接下来准备继续深入：

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

以及：

继续完善自己的 ArkUI Demo。

结尾

虽然现在还有很多不会。

但至少：

已经开始知道：

txt 复制代码

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

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