阅读时长约 19 分钟 | 难度★★★★☆ | 篇章第 9 篇 · 取名乐律地理 AI 助手 对应源码entry/src/main/ets/pages/naming/AiNamingPage.ets前言AI 取名是玄象项目结合传统文化与 AI 能力的特色功能。用户通过表单录入姓氏、性别、生辰、典籍偏好等信息点击“开始取名“触发 AI 命名请求。本篇将深入剖析玄象项目 AI 取名页的实现从TextInput姓氏输入、Toggle性别选择、styleOptions典籍偏好 Chip 选择到TextArea额外要求录入与Button提交。掌握这套 AI 取名表单实现方法论您就能为任何 HarmonyOS 应用构建 AI 功能的前端交互。提示玄象项目 AI 取名支持从《诗经》《楚辞》《周易》等 8 种典籍中选择命名风格。一、表单字段1.1 状态变量State surname: string ; State gender: string 男; State birthYear: number 2024; State birthMonth: number 1; State birthDay: number 1; State selectedStyles: string[] []; State styleOptions: string[] [诗经, 楚辞, 唐诗, 宋词, 周易, 论语, 道德经, 尚书]; State extraRequirements: string ;二、典籍偏好选择2.1 Chip 选择器Wrap() { ForEach(this.styleOptions, (style: string) { Text(style) .fontSize(13) .fontColor(this.selectedStyles.includes(style) ? #FFFFFF : Colors.PRIMARY_GOLD) .backgroundColor(this.selectedStyles.includes(style) ? Colors.PRIMARY_GOLD : Colors.BG_CARD_HIGHLIGHT) .padding({ left: 14, right: 14, top: 6, bottom: 6 }) .borderRadius(20) .border({ width: 1, color: Colors.PRIMARY_GOLD }) .onClick(() { if (this.selectedStyles.includes(style)) { this.selectedStyles this.selectedStyles.filter(s s ! style); } else { this.selectedStyles.push(style); } }) }) }三、AI 取名页设计总结3.1 页面结构区域组件内容姓氏输入TextInput姓氏性别选择Row男/女 Toggle生辰输入Row × 3年/月/日典籍偏好Wrap8 个 Chip额外要求TextArea补充说明提交按钮Button“开始取名”五、典籍偏好选择器的实现5.1 典籍列表State styleOptions: string[] [诗经, 楚辞, 唐诗, 宋词, 周易, 论语, 道德经, 尚书];5.2 Chip 选择器Wrap() { ForEach(this.styleOptions, (style: string) { Text(style) .fontSize(13) .fontColor(this.selectedStyles.includes(style) ? #FFFFFF : Colors.PRIMARY_GOLD) .backgroundColor(this.selectedStyles.includes(style) ? Colors.PRIMARY_GOLD : Colors.BG_CARD_HIGHLIGHT) .padding({ left: 14, right: 14, top: 6, bottom: 6 }) .borderRadius(20) .border({ width: 1, color: Colors.PRIMARY_GOLD }) .onClick(() { if (this.selectedStyles.includes(style)) { this.selectedStyles this.selectedStyles.filter(s s ! style); } else { this.selectedStyles.push(style); } }) }) }六、表单验证与提交6.1 表单验证private validateForm(): boolean { if (!this.surname.trim()) { this.showToast(请输入姓氏); return false; } if (this.selectedStyles.length 0) { this.showToast(请选择至少一个典籍风格); return false; } return true; }6.2 提交按钮Button(开始取名) .fontSize(16) .fontColor(#FFFFFF) .width(100%) .height(48) .backgroundColor(Colors.PRIMARY_GOLD) .borderRadius(24) .disabled(this.isLoading) .onClick(() { if (this.validateForm()) { this.submitNaming(); } })七、AI 取名页的数据流用户填写表单 ↓ State 绑定表单数据 ↓ 点击开始取名 ↓ validateForm() 验证 ↓ submitNaming() 提交 ↓ isLoading true按钮禁用 ↓ fetchNames() 网络请求 ↓ router.pushUrl → NamingResultPage ↓ isLoading false恢复按钮八、AI 取名页的视觉设计规范8.1 色彩方案元素颜色用途标题Colors.PRIMARY_GOLD金色强调标签Colors.PRIMARY_GOLD字段标签输入框背景Colors.BG_CARD_HIGHLIGHT输入区域选中 ChipColors.PRIMARY_GOLD金色背景未选 ChipColors.BG_CARD_HIGHLIGHT深色背景提交按钮Colors.PRIMARY_GOLD金色按钮8.2 布局规范表单卡片左右间距 16vp上下间距 16vp输入框高度48vp圆角 12vpChip 选择器圆角 20vp左右间距 14vp提交按钮全宽高度 48vp圆角 24vp8.3 交互反馈输入框聚焦时边框高亮Chip 选中时颜色切换提交按钮加载状态禁用表单验证失败时 Toast 提示九、AI 取名页的性能优化9.1 输入防抖private debounceTimer: number -1; private onSurnameChange(value: string): void { if (this.debounceTimer ! -1) { clearTimeout(this.debounceTimer); } this.debounceTimer setTimeout(() { this.surname value; }, 300); }9.2 数据缓存对于已生成的取名结果可缓存到本地 preferences避免重复请求。十、AI 取名页的测试describe(AiNamingTest, () { it(should validate surname, 0, () { const page new AiNamingPage(); page.surname ; expect(page.validateForm()).assertFalse(); }); it(should validate style selection, 0, () { const page new AiNamingPage(); page.surname 李; page.selectedStyles []; expect(page.validateForm()).assertFalse(); }); });十一、总结与最佳实践11.1 AI 取名页的开发要点表单验证是用户体验的关键应在提交前进行完整验证典籍偏好选择器使用 Chip 组件视觉清晰且交互直观提交按钮在加载状态下禁用防止重复提交输入框应使用防抖优化减少不必要的状态更新11.2 AI 取名页的常见问题问题原因解决方案输入框卡顿状态更新频繁使用防抖优化提交按钮多次点击未禁用加载状态添加 isLoading 判断典籍选择不生效selectedStyles 未正确更新使用 filter 和 push 方法网络请求失败接口异常添加 try-catch 错误处理11.3 AI 取名页的扩展方向添加更多典籍来源扩大命名风格选择支持批量取名一次生成多个名字添加名字收藏功能保存喜欢的名字支持名字打分与排行帮助用户选择总结本篇以玄象项目 AI 取名页为蓝本深入剖析了 ArkUI AI 功能表单的实现从TextInput姓氏输入、Toggle性别选择、styleOptions典籍偏好 Chip 选择到TextArea额外要求录入与Button提交。掌握这套 AI 取名表单实现方法论您就能为任何 HarmonyOS 应用构建 AI 功能的前端交互。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源HarmonyOS 官方文档TextArea 组件HarmonyOS 官方文档TextInput 组件HarmonyOS 官方文档Button 组件开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net十二、AI 取名页的完整代码示例12.1 页面完整源码Entry Component struct AiNamingPage { State surname: string ; State gender: string 男; State birthYear: number 2024; State birthMonth: number 1; State birthDay: number 1; State selectedStyles: string[] []; State isLoading: boolean false; private validateForm(): boolean { if (!this.surname.trim()) return false; if (this.selectedStyles.length 0) return false; return true; } build() { Column() { // 顶部导航 Row() { Text(←).onClick(() router.back()) Blank() Text(AI取名).fontSize(28).fontColor(Colors.PRIMARY_GOLD) Blank() } // 表单内容 Scroll() { Column({ space: 16 }) { // 姓氏输入 TextInput({ placeholder: 请输入姓氏 }) .onChange((v) { this.surname v; }) // 典籍偏好 Wrap() { /* 典籍 Chip 选择器 */ } // 提交按钮 Button(开始取名) .disabled(this.isLoading) .onClick(() { if (this.validateForm()) this.submitNaming(); }) } } } } }12.2 代码要点所有表单字段使用State管理实现响应式数据绑定表单验证在validateForm()方法中集中处理提交按钮通过isLoading状态控制禁用典籍选择使用 Chip 组件交互直观12.3 AI 取名页的完整代码Entry Component struct AiNamingPage { State surname: string ; State gender: string 男; State birthYear: number 2024; State birthMonth: number 1; State birthDay: number 1; State selectedStyles: string[] []; State styleOptions: string[] [诗经, 楚辞, 唐诗, 宋词, 周易, 论语, 道德经, 尚书]; State extraRequirements: string ; State isLoading: boolean false; build() { Column() { Row() { Text(←).fontSize(24).fontColor(Colors.PRIMARY_GOLD).onClick(() router.back()) Blank() Text(AI取名).fontSize(28).fontWeight(FontWeight.Bold).fontColor(Colors.PRIMARY_GOLD) Blank() Text().fontSize(24) } .width(100%).padding({ left: 16, right: 16, top: 50, bottom: 12 }) Scroll() { Column({ space: 16 }) { // 姓氏输入 Column({ space: 12 }) { Text(姓氏).fontSize(16).fontColor(Colors.PRIMARY_GOLD).width(100%) TextInput({ placeholder: 请输入姓氏 }) .fontSize(16).fontColor(Colors.TEXT_PRIMARY) .backgroundColor(Colors.BG_CARD_HIGHLIGHT).height(48).borderRadius(12) .padding({ left: 16 }).onChange((v) { this.surname v; }) } .width(100%).padding(16).backgroundColor(Colors.BG_CARD).borderRadius(16) // 提交按钮 Button(开始取名) .fontSize(16).fontColor(#FFFFFF).width(100%).height(48) .backgroundColor(Colors.PRIMARY_GOLD).borderRadius(24) .disabled(this.isLoading) .onClick(() { if (this.validateForm()) this.submitNaming(); }) } .padding({ left: 16, right: 16, bottom: 40 }) } .layoutWeight(1) } .width(100%).height(100%).backgroundColor(Colors.BG_DARK) } private validateForm(): boolean { if (!this.surname.trim()) return false; if (this.selectedStyles.length 0) return false; return true; } }12.4 代码要点总结所有表单字段使用State管理实现响应式数据绑定表单验证在validateForm()方法中集中处理提交按钮通过isLoading状态控制禁用典籍选择使用 Chip 组件交互直观页面采用 Scroll Column 布局适配不同屏幕尺寸12.5 AI 取名页的测试要点测试项预期结果测试方法表单验证空姓氏时提示错误不输入姓氏直接提交典籍选择选中/取消切换点击典籍 Chip按钮状态提交时禁用点击提交后按钮不可用页面跳转成功跳转到结果页提交后 router.pushUrl网络错误显示错误提示断网后提交12.6 AI 取名页的扩展方向添加更多典籍来源扩大命名风格选择范围支持批量取名一次生成多个候选名字添加名字收藏功能保存喜欢的名字支持名字评分与排行帮助用户选择添加名字读音播放功能辅助发音判断