旅行规划助手基于 HarmonyOS ArkTS 的 AI 旅行攻略应用开发实践本文基于 HarmonyOS 6.0 ArkTS DevEco Studio从零构建一个集成六大旅行主题的 AI 对话应用。涵盖Entry/Component/Builder 声明式 UI、三层架构设计、router 路由导航、多主题配色策略以及 AI 对话模拟的完整实现适合鸿蒙应用开发者参考。一、项目背景旅行规划看似简单实则涉及目的地选择、行程编排、预算控制、美食发掘、交通住宿等多个环节。面对海量的攻略信息用户往往陷入选择困难——小红书翻了几百篇最后还是不知道去哪儿。本项目基于 HarmonyOS 6.0 平台使用 ArkTS 声明式 UI 框架构建了一个「旅行规划助手」AI 对话应用。应用集成六大旅行话题——目的地推荐、行程规划、预算规划、美食攻略、交通住宿、旅行贴士——用户点击话题标签或输入自然语言即可获得结构化的旅行建议。鸿蒙特色亮点使用EntryComponentBuilder实现声明式组件化 UI通过router.pushUrl实现多页面路由导航State响应式状态管理驱动 UI 自动刷新ForEachScroll实现高性能消息列表二、核心架构2.1 三层架构entry/src/main/ets/ ├── models/ │ └── TravelModel.ets # 数据模型消息、话题、目的地 ├── services/ │ └── TravelService.ets # 业务服务AI 回复生成、关键词匹配 └── pages/ └── LvxingPage.ets # UI 页面聊天界面、话题栏、输入区2.2 鸿蒙 ArkTS 装饰器运用装饰器作用应用场景Entry标记页面入口每个页面有且仅有一个 Entry 组件Component声明自定义组件struct 结构体需要 Component 才能被框架识别State响应式状态变量messages、inputText、isLoading变化时 UI 自动刷新Builder声明式 UI 构建器buildHeader()、buildTopicBar()、buildMessageBubble()2.3 数据模型TravelModel.etsexportenumMessageRole{USERuser,ASSISTANTassistant}exportenumTravelTopic{DEST目的地推荐,ITINERARY行程规划,BUDGET预算规划,FOOD美食攻略,TRANSPORT交通住宿,TIPS旅行贴士}exportclassChatMessage{role:MessageRole content:stringtimestamp:numberconstructor(role:MessageRole,content:string){this.rolerole;this.contentcontent;this.timestampDate.now()}}设计要点ArkTS 不支持indexed signatures因此必须使用class而非object literal来定义数据结构确保类型安全。三、AI 服务层设计3.1 系统提示词privatesystemPrompt:string你是一个旅行规划专家精通全球目的地推荐、行程规划、预算管理和旅行攻略。\n\n回答原则\n- 具体化给出可立即执行的行程安排\n- 个性化根据用户的预算、时间和偏好定制\n- 实用性提供真实的交通、住宿、美食信息3.2 六大话题的 AI 回复每个话题都有精心设计的结构化回复包含核心方法论如目的地推荐的海岛/文化/自然三分类具体执行步骤如行程规划的Day1→Day5 逐日安排预算预估表格多档位对比实用技巧如错峰出行省30-50%3.3 关键词匹配策略generateMockReply(userMessage:string):ChatMessage{constlowerMsguserMessage.toLowerCase()constkeysthis.mockResponses.keys()// 遍历话题关键词匹配用户输入letresultkeys.next()while(!result.done){if(lowerMsg.includes(result.value)){returnnewChatMessage(MessageRole.ASSISTANT,this.mockResponses.get(result.value)!)}resultkeys.next()}returnnewChatMessage(MessageRole.ASSISTANT,this.mockResponses.get(默认)!)}四、鸿蒙 UI 组件化开发4.1 Builder 声明式 UI 构建ArkTS 的Builder装饰器将 UI 逻辑封装为可复用方法每个方法对应一个独立 UI 区块LvxingPage (主页面) ├── buildHeader() # 顶部标题栏 ├── buildTopicBar() # 横向滚动话题栏 ├── Scroll ForEach # 消息列表 │ ├── buildMessageBubble() # 消息气泡 │ └── buildLoadingBubble() # 加载状态 └── buildInputArea() # 底部输入区域4.2 State 响应式状态管理Statemessages:ChatMessage[][]// 消息数据变化 → 列表自动刷新StateinputText:string// 输入框变化 → 发送按钮状态联动StateisLoading:booleanfalse// 加载状态 → 显示思考中气泡StateselectedTopic:string// 选中话题 → 高亮样式切换只需修改State变量的值框架会自动触发 UI 重新渲染无需手动操作 DOM。4.3 话题栏横向滚动 选中高亮BuilderbuildTopicBar(){Scroll(){Row(){ForEach(this.topics,(topic:TopicOption){Text(${topic.icon}${topic.label}).fontColor(this.selectedTopictopic.label?Color.White:COLOR_TEXT_SECONDARY).backgroundColor(this.selectedTopictopic.label?COLOR_TOPIC_SELECTED:COLOR_TOPIC_BG).borderRadius(16).onClick((){this.onTopicSelect(topic)})})}}.scrollable(ScrollDirection.Horizontal)}4.4 消息气泡左右布局 角色区分用户消息靠右青蓝色气泡AI 消息靠左白色气泡使用Blank()组件实现左右对齐constraintSize({ maxWidth: 85% })防止长文本撑满屏幕五、路由导航首页整合应用首页 [Index.ets](file:///c:/Users/l/DevEcoStudioProjects/MyApplication/entry/src/main/ets/pages/Index.ets) 通过卡片入口跳转到聊天页import{router}fromkit.ArkUI// 首页卡片点击跳转.onClick((){router.pushUrl({url:pages/LvxingPage})})路由注册在 [main_pages.json](file:///c:/Users/l/DevEcoStudioProjects/MyApplication/entry/src/main/resources/base/profile/main_pages.json){src:[pages/Index,pages/LvxingPage,pages/XuexiPage,pages/JiankangPage,pages/ShiCiChuangZuo]}六、青蓝色主题配色用途色值语义页面背景#F0F9FF极浅青蓝干净清爽主色调#0EA5E9标准青蓝代表天空、海洋、自由边框#BAE6FD浅青蓝分隔但不突兀强调色#F97316橙色与青蓝形成对比用于清除按钮配色策略所有颜色定义为页面级const常量切换主题只需修改色值无需改动 UI 代码。七、鸿蒙 AI 核心亮点亮点一声明式 UI 响应式状态ArkTS 的StateBuilder组合让 UI 开发从命令式操作 DOM变为声明式描述状态。消息列表、输入框状态、选中态高亮全部由状态驱动代码简洁且不易出错。亮点二三层架构的解耦设计Model数据→ Service业务→ ViewUI职责清晰。同一套 UI 代码消息气泡、话题栏、输入区可复用于其他 AI 应用只需替换 Service 和 Model。亮点三路由导航的多页面整合通过router.pushUrl将多个 AI 应用整合到同一首页用户点击卡片即进入对应聊天页实现了一个 App多个 AI 助手的产品形态。亮点四AI 对话的真实感模拟使用setTimeout(1500ms)模拟 AI 思考延迟搭配正在为你规划旅行方案…的加载提示营造真实的 AI 对话体验。generateReply方法已预留callAI接口切换真实 AI API 只需替换内部实现。亮点五跨项目可复用的配色方案所有颜色、文案定义为页面级常量不依赖外部Constants.ets。每个 AI 应用有独立配色旅行青蓝、学习橙黄、健康绿色、诗词紫色切换主题不影响其他页面。八、总结旅行规划助手是 HarmonyOS ArkTS AI 对话场景的一次完整实践。核心经验State Builder 是 ArkTS 的黄金搭档状态驱动 UI声明式描述界面class 替代 object literal在 ArkTS 类型约束下class 是更安全的数据结构三层架构解耦Model / Service / View 分离跨项目复用成本极低router 路由整合多 AI 应用共存于同一 App用户体验统一AI 回复预留接口mock 与真实 API 切换只需修改 Service 内部✈️ 从选择困难到一键出发旅行规划助手让出行变得简单。希望这篇文章能为你的鸿蒙应用开发提供一些启发。