鸿蒙实战 - 资料征集分发台：收件卡片与状态保持实现

实例资料征集分发台技术ComponentV2、Slider、Toggle、TextInput、TextArea、资料流程卡片一、本篇范围本篇只看五张资料卡片。资料征集页的重点不是炫效果而是让同一组卡片在不同密度视图里保持可编辑因此卡片代码必须完整呈现出来。二、卡片组一征集通知与签收记录ComponentV2struct CollectNoticeCard{Localtitle:string批次 A 通知;Localnote:string先发给东区、北区和设备组。;build(){Column({space:10}){Text(征集通知).fontSize(17).fontWeight(FontWeight.Bold).fontColor(#111827)TextInput({text:this.title,placeholder:通知标题}).backgroundColor(#F8FAFC).borderRadius(10).onChange((value:string)this.titlevalue)TextArea({text:this.note,placeholder:发送范围}).height(86).backgroundColor(#F8FAFC).borderRadius(10).onChange((value:string)this.notevalue)}.width(100%).padding(16).backgroundColor(#FFFFFF).borderRadius(18)}}ComponentV2struct CollectReceiveCard{Localcount:number18;Localnote:string上午已签收 12 份下午继续补收。;build(){Column({space:10}){Text(签收记录).fontSize(17).fontWeight(FontWeight.Bold).fontColor(#111827)Row(){Text(已到件数).fontSize(12).fontColor(#64748B)Blank()Text(${Math.round(this.count)}份).fontSize(14).fontWeight(FontWeight.Medium).fontColor(#0F766E)}.width(100%)Slider({value:this.count,min:0,max:40,step:1}).selectedColor(#14B8A6).trackColor(#CCFBF1).blockColor(#0F766E).onChange((value:number)this.countvalue)TextArea({text:this.note,placeholder:签收说明}).height(86).backgroundColor(#F8FAFC).borderRadius(10).onChange((value:string)this.notevalue)}.width(100%).padding(16).backgroundColor(#FFFFFF).borderRadius(18)}}这组卡片分别展示文本输入和数值录入。资料页的技术重点不在颜色或排版而在同一组卡片在三种视图里都能继续编辑因此这些基础控件必须完整保留。三、卡片组二缺件提醒与批次打包ComponentV2struct CollectMissingCard{Localurgent:booleantrue;Localnote:string仍缺封面页、签章页和电子留档页。;build(){Column({space:10}){Text(缺件提醒).fontSize(17).fontWeight(FontWeight.Bold).fontColor(#111827)Row(){Text(是否加急).fontSize(12).fontColor(#64748B)Blank()Toggle({type:ToggleType.Switch,isOn:this.urgent}).selectedColor(#DC2626).onChange((value:boolean)this.urgentvalue)}.width(100%)TextArea({text:this.note,placeholder:缺件项目}).height(102).backgroundColor(#F8FAFC).borderRadius(10).onChange((value:string)this.notevalue)}.width(100%).padding(16).backgroundColor(#FFFFFF).borderRadius(18)}}ComponentV2struct CollectPackageCard{Localowner:string夏打包;Localnote:string按楼层顺序打包便于下午统一分发。;build(){Column({space:10}){Text(批次打包).fontSize(17).fontWeight(FontWeight.Bold).fontColor(#111827)TextInput({text:this.owner,placeholder:打包负责人}).backgroundColor(#F8FAFC).borderRadius(10).onChange((value:string)this.ownervalue)TextArea({text:this.note,placeholder:打包说明}).height(86).backgroundColor(#F8FAFC).borderRadius(10).onChange((value:string)this.notevalue)}.width(100%).padding(16).backgroundColor(#FFFFFF).borderRadius(18)}}第二组卡片把缺件和打包流程拆开分别用Toggle、TextInput和TextArea表达。文章在这里要强调的是布局模式变化不应该影响字段归属缺件就应该永远留在缺件卡里。四、卡片组三回传校验与三模式按钮ComponentV2struct CollectVerifyCard{Localdone:booleanfalse;Localnote:string回传校验前先检查页码、顺序和签章完整度。;build(){Column({space:10}){Text(回传校验).fontSize(17).fontWeight(FontWeight.Bold).fontColor(#111827)Row(){Text(是否完成).fontSize(12).fontColor(#64748B)Blank()Toggle({type:ToggleType.Switch,isOn:this.done}).selectedColor(#2563EB).onChange((value:boolean)this.donevalue)}.width(100%)TextArea({text:this.note,placeholder:校验说明}).height(102).backgroundColor(#F8FAFC).borderRadius(10).onChange((value:string)this.notevalue)}.width(100%).padding(16).backgroundColor(#FFFFFF).borderRadius(18)}}Row({space:8}){Button(单列).height(36).backgroundColor(this.currentMode单列?#111827:#E5E7EB).fontColor(this.currentMode单列?#FFFFFF:#334155).onClick(()this.switchToSingle())Button(双列).height(36).backgroundColor(this.currentMode双列?#111827:#E5E7EB).fontColor(this.currentMode双列?#FFFFFF:#334155).onClick(()this.switchToDouble())Button(三列).height(36).backgroundColor(this.currentMode三列?#111827:#E5E7EB).fontColor(this.currentMode三列?#FFFFFF:#334155).onClick(()this.switchToTriple())}.width(100%).padding({left:16,right:16,bottom:10})Scroll(){DynamicLayout(this.layoutAlgorithm){CollectNoticeCard()CollectReceiveCard()CollectMissingCard()CollectPackageCard()CollectVerifyCard()}.width(100%).padding({left:16,right:16,bottom:24})}最后一组代码把第五张卡和按钮区放在一起。这样写的原因很直接资料页的真正交互闭环就是“切模式 → 看卡片排布 → 继续改卡片内容”所以按钮区和DynamicLayout挂载关系必须一起交代。五、卡片绑定对照表卡片或区域主要控件状态字段页面作用征集通知TextInput / TextAreatitle / note通知标题与发送范围签收记录Slider / TextAreacount / note件数与签收说明缺件提醒Toggle / TextAreaurgent / note缺件与加急批次打包TextInput / TextAreaowner / note打包负责人和说明回传校验Toggle / TextAreadone / note校验完成状态六、本篇小结第二篇把五张资料卡完整展开目的是证明这页不是“切个列数给你看”而是同一组可编辑卡片在不同信息密度下都能工作。