首页/新闻资讯/正文详情

HarmonyOS应用《玄象》开发实战:BaziInputPage 八字录入:TextInput / DatePicker / TimePicker 表单组件

发布时间:2026/9/27 22:35:19 来源:云帆数科 栏目:资讯中心
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

相关推荐

NSGAII算法在无人机3D路径规划中的Matlab实现与优化
NSGAII算法在无人机3D路径规划中的Matlab实现与优化

1. 项目背景与核心价值无人机3D路径规划是当前智能飞行器领域的关键技术挑战。在复杂三维环境中,无人机需要避开建筑物、山体等障碍物,同时满足飞行时间、能耗、安全性等多重约束条件。传统单目标优化算法往往难以平衡这些相互冲突的指标,这正… · 2026/9/17 3:46:25

解决Windows中mfc140u.dll缺失问题的完整指南
解决Windows中mfc140u.dll缺失问题的完整指南

1. 问题现象与背景解析当你在Windows系统运行某些软件时,突然弹出"无法启动此程序,因为计算机中丢失mfc140u.dll"的错误提示,这种情况通常发生在以下场景:安装新版本Visual C运行库后旧版本被覆盖误删系统关键文件使用绿… · 2026/9/17 20:16:48

Windows开机自启动应用配置全攻略
Windows开机自启动应用配置全攻略

1. Windows开机自启动应用配置指南每次开机后手动点击那些常用软件的图标是不是很烦?作为Windows系统管理员,我经常需要帮同事配置各种办公软件的开机自启动。今天就来分享几种可靠的方法,让你的常用软件在开机时自动运行。2. 实现方案对比与… · 2026/9/17 21:54:40

大学生做课程项目用什么AI编程软件?最新权威8款AI编程工具全解析(含TaoToken统一Key配置)
大学生做课程项目用什么AI编程软件?最新权威8款AI编程工具全解析(含TaoToken统一Key配置)

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 22:35:18

Claude Code 使用指南:从 CLAUDE.md 到 Skill 子代理的协作配置
Claude Code 使用指南:从 CLAUDE.md 到 Skill 子代理的协作配置

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 22:35:18

OpenClaw 2.0 重构后如何配 TaoToken:settings.json 与 config.toml 骨架一次讲清
OpenClaw 2.0 重构后如何配 TaoToken:settings.json 与 config.toml 骨架一次讲清

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 22:35:18

2026年程序员必看:6个AI搞钱工具配TaoToken的settings.json与config.toml骨架
2026年程序员必看:6个AI搞钱工具配TaoToken的settings.json与config.toml骨架

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 22:35:18

python如何做接口自动化测试
python如何做接口自动化测试

进行接口自动化测试的步骤主要包括这些方面呢, 第一个阶段是选择合适的测试框架, 第二个阶段是要编写测试脚本, 第三个阶段是需要设置测试环境, 第四个阶段是执行测试并生成报告。在这里, 我们会把如何使用进行接口自动化测试的过程详细去描述一下的。一、去挑选一个恰当的测试… · 2026/9/27 22:35:18

做服装在哪个网站找新手入门
做服装在哪个网站找新手入门

不会代码做服装站?3步图解步骤教你低成本起步 你是不是也卡在这一步:手里有货,脑子里有图,但就是不会代码,看着那些后台配置头大? 别急, 做服装在哪个网站找 货源只是第一步,怎么把展示出来才是关键。 今天不聊虚的,直接上 图解步骤… · 2026/9/27 22:35:12

MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现
MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现

简介:这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程,从线性调频(LFM)信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑,面向电子信息工程、计算机、数学等专业学生,适用于课程设计、期末大作… · 2026/9/27 0:00:01

汕头网站建设制作厂家避坑指南:5大注意事项救急
汕头网站建设制作厂家避坑指南:5大注意事项救急

汕头网站建设制作厂家避坑指南:5大注意事项救急 改个需求建站公司拖一周,这种憋屈事我见得太多了。 很多汕头老板找本地建站团队,签合同前看着方案挺美,一上线就变脸。 今天不聊虚的,直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01

多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习
多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习

简介:基于PyTorch的多模态虚假新闻检测项目完整代码包,面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者,解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征,以Res… · 2026/9/27 0:00:01

MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现
MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现

简介:这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程,从线性调频(LFM)信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑,面向电子信息工程、计算机、数学等专业学生,适用于课程设计、期末大作… · 2026/9/27 0:00:01

汕头网站建设制作厂家避坑指南:5大注意事项救急
汕头网站建设制作厂家避坑指南:5大注意事项救急

汕头网站建设制作厂家避坑指南:5大注意事项救急 改个需求建站公司拖一周,这种憋屈事我见得太多了。 很多汕头老板找本地建站团队,签合同前看着方案挺美,一上线就变脸。 今天不聊虚的,直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01

多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习
多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习

简介:基于PyTorch的多模态虚假新闻检测项目完整代码包,面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者,解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征,以Res… · 2026/9/27 0:00:01

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码