文章目录前言应用场景设计思路步骤规划状态管理实现过程步骤指示器条件渲染各步骤内容导航按钮进阶玩法步骤间的数据验证步骤指示器组件化写在最后前言有些表单字段太多一口气让用户填完会让人望而却步。这时候把表单拆成多个步骤一步一步引导用户填写体验会好很多。这就是所谓的向导表单Wizard Form。今天用 ArkUI 实现一个三步向导基本信息 → 联系方式 → 确认提交。每一步只展示相关字段最后一步汇总确认。应用场景多步骤向导适合这些场景新用户注册信息太多拆成几步订单填写地址 → 支付方式 → 确认问卷填写按主题分步系统初始化配置设计思路步骤规划步骤标题字段1基本信息姓名、邮箱2联系方式手机号、公司3确认信息汇总展示所有数据状态管理需要一个currentStep变量控制当前步骤以及各步骤的数据变量StatecurrentStep:number1Statestep1Name:stringStatestep2Email:stringStatestep2Phone:stringStatestep3Company:string所有步骤的数据都存在同一个组件的状态里切换步骤时数据不会丢失。实现过程步骤指示器步骤指示器是向导表单的标志性元素——让用户知道自己走到哪一步了。Row(){ForEach([1,2,3],(step:number){Column(){Circle({width:28,height:28}).fill(this.currentStepstep?#4D96FF:#E0E0E0)Text(步骤${step}).fontSize(10).fontColor(this.currentStepstep?#4D96FF:#CCCCCC).margin({top:4})}if(step3){Row().width(40).height(2).backgroundColor(this.currentStepstep?#4D96FF:#E0E0E0).margin({bottom:16})}})}.width(100%).justifyContent(FlexAlign.SpaceBetween).padding({left:16,right:16}).margin({bottom:24})步骤指示器的逻辑是圆点颜色—currentStep step时为主题色已完成/当前否则灰色未到连接线颜色—currentStep step时为主题色已通过否则灰色用ForEach遍历[1, 2, 3]生成三个步骤节点条件渲染各步骤内容用if/else if/else根据currentStep渲染不同步骤的内容if(this.currentStep1){Column(){Text(步骤 1基本信息).fontSize(15).fontWeight(FontWeight.Bold).margin({bottom:16})Column(){Text(姓名).fontSize(13).fontColor(#999999).margin({bottom:6})TextInput({placeholder:请输入姓名}).width(100%).height(42).backgroundColor(#F8F8F8).borderRadius(8).padding({left:12}).onChange((v:string){this.step1Namev})}.margin({bottom:12})Column(){Text(邮箱).fontSize(13).fontColor(#999999).margin({bottom:6})TextInput({placeholder:请输入邮箱}).width(100%).height(42).backgroundColor(#F8F8F8).borderRadius(8).padding({left:12}).onChange((v:string){this.step2Emailv})}}}elseif(this.currentStep2){Column(){Text(步骤 2联系方式).fontSize(15).fontWeight(FontWeight.Bold).margin({bottom:16})// 手机号和公司字段...}}else{// 步骤 3确认信息Column(){Text(步骤 3确认信息).fontSize(15).fontWeight(FontWeight.Bold).margin({bottom:16})Column(){Row(){Text(姓名).fontSize(13).fontColor(#999999)Text(this.step1Name||(未填写)).fontSize(13).fontColor(#333333)}.margin({bottom:8}).width(100%)// 其他字段...}.width(100%).padding(16).backgroundColor(#F8F8F8).borderRadius(8)}}第三步的确认信息页面只做展示——把前面两步填的数据汇总显示出来让用户检查。(未填写)的兜底提示也很贴心。导航按钮Row(){if(this.currentStep1){Button(上一步).width(45%).height(44).backgroundColor(#E0E0E0).borderRadius(10).fontColor(#333333).fontSize(15).onClick((){if(this.currentStep1)this.currentStep--})}else{Text().width(45%)// 第一步时占位}Button(this.currentStep3?下一步:提交).width(45%).height(44).backgroundColor(#4D96FF).borderRadius(10).fontColor(#FFFFFF).fontSize(15).onClick((){if(this.currentStep3){this.currentStep}else{AlertDialog.show({title:提交成功,message:所有步骤已完成,confirm:{value:确定,action:(){this.currentStep1}}})}})}.width(100%).justifyContent(FlexAlign.SpaceBetween).margin({top:20})导航按钮有几个细节第一步时上一步按钮不显示用空 Text 占位保持布局最后一步按钮文字变成提交提交成功后重置currentStep为 1回到第一步进阶玩法步骤间的数据验证每一步切到下一步前可以做验证.onClick((){if(this.currentStep1){if(!this.step1Name){AlertDialog.show({message:请输入姓名})return}}if(this.currentStep3)this.currentStep})步骤指示器组件化把步骤指示器封装成独立组件方便复用Componentstruct StepIndicator{ProptotalSteps:number3PropcurrentStep:number1build(){Row(){ForEach(Array.from({length:this.totalSteps}),(_,i:number){// 渲染步骤节点})}}}写在最后多步骤向导的核心思路是一个状态变量控制步骤 条件渲染切换内容。所有步骤的数据都存在同一个组件里不会因为步骤切换而丢失。步骤指示器让用户有清晰的进度感知。如果你的表单超过 5 个字段就可以考虑拆成多步骤向导了。用户一次只需要关注 2-3 个字段填写压力小很多。
-深浅色主题适配实现)
