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构建微服务统一认证方案

更多资讯

在丽江如何考电工证官方报名入口在哪里？工地太忙根本没时间复习考试

高级电工证报名值不值得考

电工证能办多少年在哪考过期了还能不能用

肥城市电工证在哪考通过率揭秘

电工证复审取消现状：上岗必备怎么应对？南阳劳务班组负责人必看

建筑电工证最新题库多久拿证？学历不高怕报不上名的看过来

今日更新

安监局电工证分数查询怎么查才能知道含金量高不高

新疆电工作业干活累吗良心建议助你避开考不过的坑

中牟县电工证怎么报名外省证能转吗

本周精选

安监局电工证分数查询怎么查才能知道含金量高不高

新疆电工作业干活累吗良心建议助你避开考不过的坑

中牟县电工证怎么报名外省证能转吗

本月热门

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

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

相关推荐

ROS 2和ROS 1的比较

Mysql数据库表的操作

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

更多资讯

在丽江如何考电工证官方报名入口在哪里？工地太忙根本没时间复习考试

高级电工证 报名值不值得考

电工证能办多少年在哪考过期了还能不能用

肥城市电工证在哪考通过率揭秘

电工证复审取消现状：上岗必备怎么应对？南阳劳务班组负责人必看

建筑电工证最新题库多久拿证？学历不高怕报不上名的看过来

今日更新

安监局电工证分数查询怎么查才能知道含金量高不高

新疆电工作业干活累吗 良心建议助你避开考不过的坑

中牟县电工证怎么报名外省证能转吗

本周精选

安监局电工证分数查询怎么查才能知道含金量高不高

新疆电工作业干活累吗 良心建议助你避开考不过的坑

中牟县电工证怎么报名外省证能转吗

本月热门

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

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

高级电工证报名值不值得考

新疆电工作业干活累吗良心建议助你避开考不过的坑

新疆电工作业干活累吗良心建议助你避开考不过的坑