HarmonyOS应用《玄象》开发实战：BaziInputPage 八字录入：TextInput / DatePicker / TimePicker 表单组件
阅读时长约 19 分钟 | 难度★★★★☆ | 篇章第 6 篇 · 命理八字模块对应源码entry/src/main/ets/pages/mingli/BaziInputPage.ets前言八字排盘的第一步是录入出生信息。玄象项目通过BaziInputPage提供完整的表单录入界面涵盖年/月/日/时/分的数值输入、公历/农历切换、性别选择、出生地填写等字段。本篇将深入剖析玄象项目八字录入页的实现从TextInput文本输入、Toggle开关切换、NumberInput数字输入 Builder、State表单状态管理到表单验证与跳转。掌握这套表单组件实现方法论您就能为任何 HarmonyOS 应用构建标准化的表单录入页面。提示玄象项目八字录入页默认值为 1990 年 1 月 1 日 12:00包含公历/农历切换开关和实时时辰显示。一、表单结构1.1 状态变量StatebirthYear:number1990;StatebirthMonth:number1;StatebirthDay:number1;StatebirthHour:number12;StatebirthMinute:number0;Stategender:string男;StatebirthPlace:string北京;StateisLunar:booleanfalse;二、NumberInput 数字输入2.1 Builder 实现BuilderNumberInput(label:string,value:number,min:number,max:number,onChange:(v:number)void){Column({space:4}){Text(label).fontSize(12).fontColor(Colors.TEXT_DIM)Row({space:4}){Text(−).fontSize(20).fontColor(Colors.PRIMARY_GOLD).onClick((){if(valuemin)onChange(value-1);})TextInput({text:${value}}).width(70).textAlign(TextAlign.Center).backgroundColor(Colors.BG_CARD).fontColor(Colors.TEXT_PRIMARY).onChange((v:string){constnumparseInt(v);if(!isNaN(num)numminnummax){onChange(num);}})Text().fontSize(20).fontColor(Colors.PRIMARY_GOLD).onClick((){if(valuemax)onChange(value1);})}}}三、公历/农历切换3.1 Toggle 开关Row(){Toggle({type:ToggleType.Switch,isOn:this.isLunar}).selectedColor(Colors.PRIMARY_GOLD).onChange((isOn:boolean){this.isLunarisOn;})Text(this.isLunar?农历:公历).fontSize(12)}四、时辰显示4.1 实时时辰Text(时辰${this.getShiChen()}).fontSize(13).fontColor(Colors.TEXT_SECONDARY)privategetShiChen():string{returnHeavenlyStems.getShiChen(this.birthHour);}五、表单提交5.1 跳转分析页Button(开始排盘).fontSize(16).fontColor(#FFFFFF).width(100%).height(48).backgroundColor(Colors.PRIMARY_GOLD).borderRadius(24).onClick((){router.pushUrl({url:pages/mingli/MingliAnalysisPage,params:{birthYear:this.birthYear,birthMonth:this.birthMonth,birthDay:this.birthDay,birthHour:this.birthHour,birthMinute:this.birthMinute,gender:this.gender,birthPlace:this.birthPlace,isLunar:this.isLunar}});})六、八字录入页设计总结6.1 页面结构区域组件内容日期输入Column年/月/日 公历/农历切换时间输入Column时/分 实时时辰显示性别选择Row男/女单选出生地TextInput地点输入提交按钮Button“开始排盘”总结本篇以玄象项目八字录入页为蓝本深入剖析了 ArkUI 表单组件实现从TextInput文本输入、Toggle开关切换、NumberInput数字输入 Builder、State表单状态管理到表单验证与跳转。掌握这套表单组件实现方法论您就能为任何 HarmonyOS 应用构建标准化的表单录入页面。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源HarmonyOS 官方文档TextInput 组件开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net
)
