资讯详情

深入了解 · 专业解读

鸿蒙ArkTS社区活动编排板：岗位编排卡片与输入实现

发布时间：2026/8/22 3:47:11
鸿蒙ArkTS社区活动编排板：岗位编排卡片与输入实现 实例社区活动编排板技术ComponentV2、Row 卡片、TextInput、间距切换按钮一、本篇范围本篇只看岗位标签卡与间距切换。每张卡的宽度不固定输入框又会改变内容长度这正好可以验证标签云布局是否真的按子节点尺寸换行。二、标签卡组一签到与布场ComponentV2struct VolunteerTagCard{Locallabel:string签到;Localcount:number6;Localnote:string东门;build(){Row({space:8}){Text(this.label).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#0F172A)Text(${Math.round(this.count)}人).fontSize(12).fontColor(#334155)TextInput({text:this.note,placeholder:区域}).width(88).height(32).backgroundColor(#F8FAFC).borderRadius(8).onChange((value:string)this.notevalue)}.padding({left:14,right:14,top:10,bottom:10}).backgroundColor(#FFFFFF).borderRadius(16)}}ComponentV2struct LogisticsTagCard{Locallabel:string布场;Localcount:number4;Localnote:string主舞台;build(){Row({space:8}){Text(this.label).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#0F172A)Text(${Math.round(this.count)}人).fontSize(12).fontColor(#334155)TextInput({text:this.note,placeholder:区域}).width(96).height(32).backgroundColor(#F8FAFC).borderRadius(8).onChange((value:string)this.notevalue)}.padding({left:14,right:14,top:10,bottom:10}).backgroundColor(#FFFFFF).borderRadius(16)}}这组卡片负责入口签到与布场岗位。它们结构相近但输入框宽度不同正好用来验证标签云算法是否真的按子节点测量尺寸换行。三、标签卡组二串场与物料ComponentV2struct StageTagCard{Locallabel:string串场;Localcount:number2;Localnote:string节目单;build(){Row({space:8}){Text(this.label).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#0F172A)Text(${Math.round(this.count)}人).fontSize(12).fontColor(#334155)TextInput({text:this.note,placeholder:重点}).width(98).height(32).backgroundColor(#F8FAFC).borderRadius(8).onChange((value:string)this.notevalue)}.padding({left:14,right:14,top:10,bottom:10}).backgroundColor(#FFFFFF).borderRadius(16)}}ComponentV2struct MaterialTagCard{Locallabel:string物料;Localcount:number5;Localnote:string背板;build(){Row({space:8}){Text(this.label).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#0F172A)Text(${Math.round(this.count)}人).fontSize(12).fontColor(#334155)TextInput({text:this.note,placeholder:重点}).width(88).height(32).backgroundColor(#F8FAFC).borderRadius(8).onChange((value:string)this.notevalue)}.padding({left:14,right:14,top:10,bottom:10}).backgroundColor(#FFFFFF).borderRadius(16)}}第二组卡片把岗位描述换成了节目单和物料重点但代码结构依然保持短标签 数量 输入框的模式。这样做的好处是页面可统一排版算法只关心每张卡的真实宽度。四、标签卡组三秩序与茶歇ComponentV2struct SecurityTagCard{Locallabel:string秩序;Localcount:number3;Localnote:string西门;build(){Row({space:8}){Text(this.label).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#0F172A)Text(${Math.round(this.count)}人).fontSize(12).fontColor(#334155)TextInput({text:this.note,placeholder:区域}).width(88).height(32).backgroundColor(#F8FAFC).borderRadius(8).onChange((value:string)this.notevalue)}.padding({left:14,right:14,top:10,bottom:10}).backgroundColor(#FFFFFF).borderRadius(16)}}ComponentV2struct TeaBreakTagCard{Locallabel:string茶歇;Localcount:number4;Localnote:string南厅;build(){Row({space:8}){Text(this.label).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#0F172A)Text(${Math.round(this.count)}人).fontSize(12).fontColor(#334155)TextInput({text:this.note,placeholder:区域}).width(88).height(32).backgroundColor(#F8FAFC).borderRadius(8).onChange((value:string)this.notevalue)}.padding({left:14,right:14,top:10,bottom:10}).backgroundColor(#FFFFFF).borderRadius(16)}}最后一组卡片继续维持相同结构。对于标签云页面来说技术重点不是某一张卡多复杂而是所有卡共享相同的宽度测量规则所以文章要把整组卡片完整展示出来。五、页面控制区紧凑与舒展排布Row({space:8}){Button(紧凑排布).height(36).backgroundColor(#E0F2FE).fontColor(#0C4A6E).onClick(()this.switchGap(8,8))Button(舒展排布).height(36).backgroundColor(#FEF3C7).fontColor(#92400E).onClick(()this.switchGap(12,12))}.width(100%).padding({left:16,right:16,bottom:10})Scroll(){Column({space:14}){DynamicLayout(this.layoutAlgorithm){VolunteerTagCard()LogisticsTagCard()StageTagCard()MaterialTagCard()SecurityTagCard()TeaBreakTagCard()}.width(100%)Column({space:8}){Text(编排说明).fontSize(15).fontWeight(FontWeight.Bold).fontColor(#111827)Text(岗位卡片采用标签云式布局后可以根据每张卡片的内容宽度自动换行。签到、布场、串场、茶歇这些不同职责不会被硬塞进固定列宽里信息利用率更高。).fontSize(12).fontColor(#64748B).lineHeight(20)}.width(100%).padding(16).backgroundColor(#FFFFFF).borderRadius(18)}.width(100%).padding({left:16,right:16,bottom:24})}按钮区只改horizontalGap和verticalGapDynamicLayout下面的卡片集合不变。这就是这一页的技术重点同一组岗位卡通过布局参数变化适配不同信息密度。六、卡片绑定对照表卡片或区域主要控件状态字段页面作用签到Text / TextInputlabel / count / note签到岗位与区域布场Text / TextInputlabel / count / note舞台布场岗位串场Text / TextInputlabel / count / note节目串场岗位物料Text / TextInputlabel / count / note物料准备岗位秩序Text / TextInputlabel / count / note秩序维护岗位茶歇Text / TextInputlabel / count / note茶歇区域岗位七、本篇小结第二篇把六张岗位卡完整展开目的是让标签云算法面对真实的可变宽度组件而不是只服务静态标签。

相关新闻