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——按照分组组织起来再加上验证和提交逻辑。核心思路没变每个字段对应一个状态变量提交时汇总所有变量。这种分组 多组件的表单模式适用于绝大多数业务场景。掌握了它你就能应对几乎所有的表单需求。