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 头像Row☯ 太极图标聊天列表List消息气泡输入区RowTextInput 发送按钮快速问答Row4 个快捷问题总结本篇以玄象项目 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 助手页开发要点聊天消息使用ListForEach渲染支持动态添加消息气泡根据角色区分样式用户/助手快速问答按钮提供常见问题入口输入框支持文本输入和发送7.2 常见问题问题原因解决方案消息不显示数据未正确绑定检查 State messages 数组气泡样式不对角色判断错误检查 msg.role 的值发送按钮不响应事件绑定错误检查 onClick 回调总结
)
