【OpenHarmony/HarmonyOs 】ArkUI 对话界面实战：消息状态、气泡布局与 AI 云函数接入设计-港品优选

【OpenHarmony/HarmonyOs 】ArkUI 对话界面实战：消息状态、气泡布局与 AI 云函数接入设计

前言

AI 助手页面看似只是消息列表和输入框，实际包含消息模型、角色布局、不可变状态更新、快捷提示、加载态、失败重试与密钥安全。LinkOS 链界已经实现了完整的对话 UI 骨架，当前回复由本地定时器模拟，正适合作为真实 AI 接入前的界面原型。🤖

一、先定义消息模型

typeChatRole ='user'|'assistant';interfaceChatMessage { id:string; role: ChatRole; content:string; time:string; }

role决定气泡方向与颜色，id为 ForEach 提供稳定标识，time用于界面展示。真实产品建议继续增加：

typeMessageStatus ='sending'|'success'|'failed'; interface ChatMessage { id:string; role: ChatRole; content:string;time:string;status: MessageStatus; requestId?:string; }

状态字段可支持发送动画、失败图标和点击重试，requestId可关联服务端日志。

二、不可变更新触发 ArkUI 刷新

privateaddUserMessage(text: string) {constvalue = text.trim();if(!value)return;this.messages = [ ...this.messages, { id: `m${this.nextIdSeq++}`, role:'user', content: value, time:this.getNowTime() } ]; }

重新赋值数组比原地push()更容易保证@State变化被框架观察。对于小型会话，这种写法直观可靠；长会话需要分页、虚拟列表和本地数据库，避免数组无限增长。

三、发送动作的正确顺序

privateonSend() {consttext =this.inputText;if(!text.trim())return;this.inputText ='';this.addUserMessage(text); setTimeout(() => {this.addAssistantMessage('我已收到你的问题……'); },200); }

当前实现用于演示交互：清空输入、添加用户消息、延时生成模拟回复。接入真实接口后，推荐流程是：

添加状态为 sending 的用户消息；
添加一条“正在生成”的助手占位消息；
调用云函数；
流式更新助手内容；
成功后标记完成，失败则保留重试入口。

四、按角色构建不同气泡

ForEach(this.messages, (message: ChatMessage)=> {if(message.role==='assistant') {Row(){Text('🤖')Column(){Text(message.content).lineHeight(22)Text(message.time).fontSize(11)} .backgroundColor(Color.White)} }else{Row(){Text(message.content).lineHeight(22)} .margin({ left:56, right:16}) .backgroundColor('rgba(97, 95, 255, 0.10)') } })

助手消息带头像并靠左，用户消息缩进显示。除了视觉差异，还应加入语义与无障碍描述，让读屏软件能说出“用户消息”或“助手回复”。

五、快捷提示降低空白页压力

首次进入对话页时，用户经常不知道该问什么。项目提供四个快捷提示，例如“推荐一些开发工具”“如何提高工作效率”。点击后复用统一发送逻辑：

privatesendQuickPrompt(text: string){this.inputText = text;this.onSend(); }

快捷提示应结合当前身份动态变化：开发者看到代码相关提示，学生看到学习计划，设计师看到灵感与作品集建议。这能把身份系统和 AI 页面连接起来。

六、为什么必须通过云函数调用模型

客户端不能直接保存 DeepSeek 或其他供应商的 API Key。HAP 在用户设备上运行，静态密钥无法真正保密。

推荐架构：

ArkUI 对话页 ↓ HTTPS，请求携带用户 Token AGC CloudFunction├─校验用户身份 ├─ 限流与内容长度检查 ├─ 从服务端环境变量读取 AI Key └─ 请求模型并返回结果

云函数还应设置超时、最大 Token、敏感内容策略和成本配额。客户端只拿业务结果，不接触第三方密钥。

七、真实接口的状态设计

建议页面至少维护：

@StateinputText: string ='';@Statemessages: ChatMessage[] = [];@StateisGenerating: boolean = false;@StateerrorText: string ='';

发送期间禁用重复提交，但应提供“停止生成”。超时后不要清掉用户问题，应将消息标为失败并允许重试。网络恢复后是否自动重发要谨慎，避免产生重复计费。

八、流式输出与性能

流式回复能让用户更快看到首字，但不要每收到一个字符就刷新整个消息列表。可以累计一小段文本或按固定时间间隔更新最后一条消息。长回答还应使用可滚动列表，并在用户主动向上阅读时停止自动滚到底部。

其他值得补齐的能力包括：

Markdown 渲染与代码块复制；
会话历史与新建会话；
消息长按复制、重新生成；
联网搜索来源引用；
对输入长度和附件大小进行限制；
页面退出时取消尚未完成的请求。

九、总结

AI 页面应先把消息状态机和交互边界做好，再连接模型接口。LinkOS 当前的 ArkUI 原型已经验证了气泡布局、快捷提示和状态数组；下一步应通过 AGC 云函数安全接入服务，补充生成态、失败重试、流式节流与历史持久化。这样才能从“看起来像聊天”成长为可用的 AI 助手。✨

企业官网建设流程全解析