实例资料征集分发台技术DynamicLayout、ColumnLayoutAlgorithm、GridLayoutAlgorithm、三模式切换、animateTo一、本篇范围本篇只看视图切换代码。和 58 不同这一页不是单列 / 双列而是单列 / 双列 / 三列三种模式因此文章重点要放在三个切换函数和layoutAlgorithm的替换方式上。二、导入与布局依赖import{ColumnLayoutAlgorithm,DynamicLayout,DynamicLayoutAttribute,GridLayoutAlgorithm,LayoutAlgorithm,LengthMetrics,curves}fromkit.ArkUI;这里依赖的仍然是ColumnLayoutAlgorithm与GridLayoutAlgorithm两条路线只不过组合出了三种模式。单列用ColumnLayoutAlgorithm双列和三列都使用GridLayoutAlgorithm区别只在columnsTemplate和间距参数。三、页面入口与三种切换函数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)}}页面入口里最关键的是三个切换函数switchToSingle、switchToDouble、switchToTriple。它们都在动画回调里替换layoutAlgorithm并同步写入currentMode。这意味着页面展示密度完全由算法实例决定而不是靠条件渲染三套卡片。四、代表性卡片签收记录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)}}这张卡用Slider TextArea表示收件数量和说明。它是验证“多视图切换后仍保留输入状态”的第一张代表卡因为数值和文本都必须留在原组件内部。五、代表性卡片缺件提醒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)}}Toggle TextArea这一组控件可以证明即使切到三列卡片内部状态依然由组件自己保存。技术文必须把这类代码直接给出来才能说明“状态保持”不是口头描述。六、布局层代码定位表代码块关注点改动入口导入与布局依赖三模式布局依赖增减模式先看 import页面入口与三种切换函数单列双列三列算法切换改单列/双列/三列参数看这里代表性卡片签收记录收件数量卡片件数与说明字段改这里代表性卡片缺件提醒缺件与加急卡片缺件字段与加急状态改这里七、本篇小结资料征集分发台的第一篇核心就是三模式切换本身。只要三个切换函数和layoutAlgorithm的替换关系讲清楚这页的技术骨架就已经完整。
