HarmonyOS应用《玄象》开发实战：AiAssistantPage AI 助手：流式对话 UI + @ohos.net.socket 长连接方案

阅读时长：约 19 分钟 | 难度：★★★★☆ | 篇章：第 9 篇 · 取名乐律地理 AI 助手 对应源码：entry/src/main/ets/pages/assistant/AiAssistantPage.ets

前言

AI 助手是玄象项目“传统文化智能顾问“的入口。页面提供聊天式的对话界面，用户可提问关于八字命理、风水布局、周易卦象、取名选字等问题。本篇将深入剖析玄象项目 AI 助手页的实现：从ChatMessage数据结构、List聊天消息列表、TextInput输入框，到快速问答按钮与@ohos.net.socket长连接方案。掌握这套 AI 助手对话 UI 实现方法论，您就能为任何 HarmonyOS 应用构建 AI 对话功能。

提示：玄象项目 AI 助手包含 4 个快速问答按钮，涵盖“今日运势““家居风水”“周易起卦”“五行补缺“等常见问题。

一、ChatMessage 数据结构

1.1 消息模型

interface ChatMessage { role: string; // 'user' | 'assistant' content: string; // 消息内容 time: string; // 发送时间 }

二、聊天消息列表

2.1 消息渲染

List({ space: 12 }) { ForEach(this.messages, (msg: ChatMessage) => { ListItem() { Row() { if (msg.role === 'user') { Blank() } Column({ space: 4 }) { Text(msg.content) .fontSize(14) .fontColor(msg.role === 'user' ? Colors.BG_DARK : Colors.TEXT_PRIMARY) .backgroundColor(msg.role === 'user' ? Colors.PRIMARY_GOLD : Colors.BG_CARD) .padding(12) .borderRadius(12) Text(msg.time) .fontSize(10) .fontColor(Colors.TEXT_DIM) } .maxWidth('80%') if (msg.role === 'assistant') { Blank() } } .width('100%') } }) }

三、快速问答

3.1 快捷按钮

@State quickQuestions: string[] = [ '今日运势如何？', '如何看家居风水？', '周易起卦方法', '五行缺什么怎么补？' ];

四、AI 助手页设计总结

4.1 页面结构

总结

本篇以玄象项目 AI 助手页为蓝本，深入剖析了 ArkUI AI 对话界面的实现：从ChatMessage数据结构、List聊天消息列表、TextInput输入框，到快速问答按钮与@ohos.net.socket长连接方案。掌握这套 AI 助手对话 UI 实现方法论，您就能为任何 HarmonyOS 应用构建 AI 对话功能。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• HarmonyOS 官方文档：socket 网络通信
• HarmonyOS 官方文档：List 组件
• HarmonyOS 官方文档：TextInput 组件
• HarmonyOS 官方文档：Scroll 组件
• HarmonyOS 官方文档：Column 组件
• HarmonyOS 官方文档：Row 组件
• 开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

六、AI 助手的完整实现

6.1 聊天消息列表

List({ space: 12 }) { ForEach(this.messages, (msg: ChatMessage) => { ListItem() { Row() { if (msg.role === 'user') { Blank() } Column({ space: 4 }) { Text(msg.content) .fontSize(14) .fontColor(msg.role === 'user' ? Colors.BG_DARK : Colors.TEXT_PRIMARY) .backgroundColor(msg.role === 'user' ? Colors.PRIMARY_GOLD : Colors.BG_CARD) .padding(12).borderRadius(12) Text(msg.time).fontSize(10).fontColor(Colors.TEXT_DIM) } .maxWidth('80%') if (msg.role === 'assistant') { Blank() } } .width('100%') } }) }

6.2 快速问答按钮

@State quickQuestions: string[] = [ '今日运势如何？', '如何看家居风水？', '周易起卦方法', '五行缺什么怎么补？' ];

6.3 输入框与发送按钮

Row() { TextInput({ placeholder: '输入您的问题...' }) .layoutWeight(1) .height(40).borderRadius(20) .backgroundColor(Colors.BG_CARD) Text('发送') .fontSize(14).fontColor(Colors.PRIMARY_GOLD) .padding(12).onClick(() => { this.sendMessage(); }) }

七、总结与最佳实践

7.1 AI 助手页开发要点

1. 聊天消息使用List+ForEach渲染，支持动态添加
2. 消息气泡根据角色区分样式（用户/助手）
3. 快速问答按钮提供常见问题入口
4. 输入框支持文本输入和发送

7.2 常见问题

总结