HarmonyOS7 综合表单实战：多种输入组件 + 分组布局 + 验证提交-北京尧图网络

文章目录前言效果展示方案设计状态管理分组布局编码实现基本信息分组联系方式分组偏好设置分组提交与重置按钮优化建议用对象统一管理表单数据分组组件化写在最后前言前面十几篇文章讲了表单的各种零散知识点——输入框、选择器、开关、验证、提交、重置。今天把这些全部串起来做一个大而全的综合表单。这个表单包含基本信息、联系方式、偏好设置三个分组用到 TextInput、Select、Toggle 等多种组件带验证、提交和重置功能。效果展示表单分为三个分组每个分组用标题和白色卡片区分基本信息姓名TextInput必填性别Select 下拉选择年龄TextInput数字类型联系方式手机号TextInput电话类型必填邮箱TextInput邮箱类型个人简介TextInput偏好设置接收通知Toggle 开关同意服务条款Checkbox方案设计状态管理StatefName:stringStatefGender:string男StatefAge:stringStatefPhone:stringStatefEmail:stringStatefBio:stringStatefNotify:booleantrueStatefAgree:booleanfalseStateresultText:string9 个状态变量覆盖所有字段。变量名用f前缀避免跟其他变量冲突。分组布局每个分组是一个Column内部用RowDivider排列字段。分组标题用主题色粗体Text(基本信息).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#4D96FF).margin({left:8,top:12,bottom:8})编码实现基本信息分组Column(){Text(基本信息).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#4D96FF).margin({left:8,top:12,bottom:8})// 姓名Row(){Text(姓名 *).fontSize(14).fontColor(#333333).width(70)TextInput({placeholder:请输入姓名}).onChange((v:string){this.fNamev}).layoutWeight(1)}.width(100%).padding({top:8,bottom:8})Divider()// 性别Row(){Text(性别).fontSize(14).fontColor(#333333).width(70)Select([{value:男},{value:女},{value:其他}]).value(男).font({size:14}).fontColor(#333333).onSelect((index:number,value?:string){if(value)this.fGendervalue}).layoutWeight(1)}.width(100%).padding({top:8,bottom:8})Divider()// 年龄Row(){Text(年龄).fontSize(14).fontColor(#333333).width(70)TextInput({placeholder:请输入年龄}).type(InputType.Number).onChange((v:string){this.fAgev}).layoutWeight(1)}.width(100%).padding({top:8,bottom:8})Divider()}联系方式分组Text(联系方式).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#4D96FF).margin({left:8,top:12,bottom:8})Row(){Text(手机号 *).fontSize(14).fontColor(#333333).width(70)TextInput({placeholder:请输入手机号}).type(InputType.PhoneNumber).onChange((v:string){this.fPhonev}).layoutWeight(1)}.width(100%).padding({top:8,bottom:8})Divider()Row(){Text(邮箱).fontSize(14).fontColor(#333333).width(70)TextInput({placeholder:请输入邮箱}).type(InputType.Email).onChange((v:string){this.fEmailv}).layoutWeight(1)}.width(100%).padding({top:8,bottom:8})Divider()Row(){Text(个人简介).fontSize(14).fontColor(#333333).width(70)TextInput({placeholder:简单介绍自己}).onChange((v:string){this.fBiov}).layoutWeight(1)}.width(100%).padding({top:8,bottom:8})Divider()偏好设置分组Text(偏好设置).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#4D96FF).margin({left:8,top:12,bottom:8})Row(){Text(接收通知).fontSize(14).fontColor(#333333).width(70)Toggle({type:ToggleType.Switch,isOn:true}).selectedColor(#4D96FF).onChange((v:boolean){this.fNotifyv})}.width(100%).padding({top:8,bottom:8})Divider()Row(){Toggle({type:ToggleType.Checkbox,isOn:false}).width(20).height(20).selectedColor(#4D96FF).onChange((v:boolean){this.fAgreev})Text( 同意服务条款).fontSize(13).fontColor(#999999)}.width(100%).padding({left:8,top:8,bottom:8})提交与重置按钮Row(){Button(重置).width(45%).height(44).backgroundColor(#E0E0E0).borderRadius(10).fontColor(#333333).fontSize(15).onClick((){this.fNamethis.fAgethis.fPhonethis.fEmailthis.fBiothis.resultText})Button(提交).width(45%).height(44).backgroundColor(#4D96FF).borderRadius(10).fontColor(#FFFFFF).fontSize(15).onClick((){if(!this.fName){promptAction.showDialog({title:提示,message:请输入姓名,buttons:[{text:确定,color:#007DFF}]})return}if(!this.fPhone){promptAction.showDialog({title:提示,message:请输入手机号,buttons:[{text:确定,color:#007DFF}]})return}this.resultText姓名:${this.fName}| 性别:${this.fGender}| 年龄:${this.fAge}\n手机:${this.fPhone}| 邮箱:${this.fEmail}\n简介:${this.fBio||无}| 通知:${this.fNotify?开:关}promptAction.showDialog({title:提交成功,message:this.resultText,buttons:[{text:确定,color:#007DFF}]})})}.width(100%).justifyContent(FlexAlign.SpaceBetween)提交时验证两个必填字段姓名和手机号通过后用promptAction.showDialog展示汇总数据。优化建议用对象统一管理表单数据字段多了之后散落的State变量不好管理。可以用一个对象统一管理StateformData{name:,gender:男,age:,phone:,email:,bio:,notify:true,agree:false}提交时直接JSON.stringify(this.formData)就行。分组组件化把分组封装成自定义组件Componentstruct FormSection{Proptitle:stringbuilderParamcontent:()voidbuild(){Column(){Text(this.title).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#4D96FF).margin({left:8,top:12,bottom:8})this.content()}}}写在最后综合表单就是把前面学到的各种组件——TextInput、Select、Toggle——按照分组组织起来再加上验证和提交逻辑。核心思路没变每个字段对应一个状态变量提交时汇总所有变量。这种分组多组件的表单模式适用于绝大多数业务场景。掌握了它你就能应对几乎所有的表单需求。

HarmonyOS7 综合表单实战：多种输入组件 + 分组布局 + 验证提交

相关推荐

ROS 2和ROS 1的比较

Mysql数据库表的操作

Spring Gateway+Sa-Token+Nacos构建微服务统一认证方案

更多资讯

电池充电电路中的路径管理：防倒灌、DPPM与低功耗设计

Impeccable Asset Producer：以 Comp 为参考的可复用栅格资源生产线

MongoDB副本集读写分离：实现高可用与低延迟的数据访问

MongoDB 存储引擎选型：WiredTiger、In-Memory 与加密引擎的对比分析

ML-For-Beginners 回归实验：使用全量南瓜数据构建并评估逻辑回归分类模型

ISO/IEC 17025 实验室认可准备：证据架构驱动的测试与校准实验室能力准备指南

今日更新

Linux 内核 ARM 虚拟内存布局全解析：从 4GB 地址空间划分到源码级验证

AIGC降重工具测评与教育应用指南

数据容灾核心指标与实战方案解析

本周精选

超人会飞不算本事：系统稳定依赖清晰规则与边界设计

超人VS蜘蛛侠：拆解超级IP的影响力与传播方法论

基于CNN的调制信号识别：MATLAB实现时频图分类实战

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？