鸿蒙项目实战 - 资料征集分发台：完整代码与运行效果

实例资料征集分发台技术完整源码、路由接入、首页入口、运行核对一、完整源码import{ColumnLayoutAlgorithm,DynamicLayout,DynamicLayoutAttribute,GridLayoutAlgorithm,LayoutAlgorithm,LengthMetrics,curves}fromkit.ArkUI;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)}}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)}}EntryComponentV2struct CollectionDeskPage{LocalcurrentMode:string双列;LocallayoutAlgorithm:LayoutAlgorithmnewGridLayoutAlgorithm({columnsTemplate:1fr 1fr,rowsGap:LengthMetrics.vp(12),columnsGap:LengthMetrics.vp(12)});privateswitchToSingle():void{this.getUIContext()?.animateTo({curve:curves.springMotion(0.45,0.82)},(){this.layoutAlgorithmnewColumnLayoutAlgorithm({space:LengthMetrics.vp(12)});this.currentMode单列;});}privateswitchToDouble():void{this.getUIContext()?.animateTo({curve:curves.springMotion(0.45,0.82)},(){this.layoutAlgorithmnewGridLayoutAlgorithm({columnsTemplate:1fr 1fr,rowsGap:LengthMetrics.vp(12),columnsGap:LengthMetrics.vp(12)});this.currentMode双列;});}privateswitchToTriple():void{this.getUIContext()?.animateTo({curve:curves.springMotion(0.45,0.82)},(){this.layoutAlgorithmnewGridLayoutAlgorithm({columnsTemplate:1fr 1fr 1fr,rowsGap:LengthMetrics.vp(10),columnsGap:LengthMetrics.vp(10)});this.currentMode三列;});}build(){Column(){Column({space:4}){Text(️ 62 资料征集分发台).fontSize(22).fontWeight(FontWeight.Bold)Text(同一组资料卡片可在单列、双列、三列三种 DynamicLayout 模式之间切换适合不同阶段的收件与分发视图。).fontSize(12).fontColor(#64748B).lineHeight(18)}.width(100%).alignItems(HorizontalAlign.Start).padding({left:16,right:16,top:14,bottom:10})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})}.layoutWeight(1).scrollBar(BarState.Off)}.width(100%).height(100%).backgroundColor(#F4F6F8)}}二、路由接入pages/api24_series/CollectionDeskPage,三、首页入口Button(️ 62 资料征集分发台).fontSize(14).width(80%).onClick((){this.getUIContext().getRouter().pushUrl({url:pages/api24_series/CollectionDeskPage});})四、运行核对表操作应看到的界面表现要核对的代码点切单列卡片纵向展开更适合逐项录入switchToSingle()是否替换成列算法切双列卡片并排展示输入状态保留switchToDouble()是否恢复双列模板切三列卡片密度更高仍可继续编辑switchToTriple()是否使用三列模板五、落地检查点完整源码里最关键的是三个切换函数与DynamicLayout的关系。路由接入后至少手动切一次单列、双列、三列验证模式按钮和内容区同步。增加资料卡数量后继续检查滚动区和三列模式下的最小可编辑宽度。六、本篇小结第三篇保留完整源码方便把这一页当成多视图资料页模板继续扩展到回收、分发、校验等相近场景。