TagManagePage：CRUD 标签管理 + 编辑模式

2026/7/21 6:33:20

前言

"海风日记"的标签管理页面支持标签的增删改查，通过编辑模式切换标签列表的显示和操作状态。

本文将从TagManagePage.ets源码出发，深入讲解标签管理的 CRUD 实现。

一、标签管理状态

@Entry@Componentstruct TagManagePage{@Statetags:string[]=['海边','美食','旅行','读书','工作','运动','朋友','家人']@StatenewTag:string=''@Stateediting:boolean=false}

二、编辑模式切换

Button(this.editing?'完成':'编辑').height(32).fontSize(14).fontColor(COLOR_AMBER).backgroundColor('rgba(200,149,106,0.10)').borderRadius(16).padding({left:12,right:12}).onClick(()=>{this.editing=!this.editing})

三、标签删除

if(this.editing){Button(){SymbolGlyph($r('sys.symbol.minus_circle')).fontSize(18).fontColor(['#D06060'])}.backgroundColor('transparent').width(36).height(36).onClick(()=>{this.tags.splice(idx,1)this.tags=[...this.tags]// 触发 UI 更新})}

四、标签新增

Row({space:10}){TextInput({placeholder:'添加新标签…',text:this.newTag}).layoutWeight(1).height(44).fontSize(14).placeholderColor(COLOR_TEXT_HINT).backgroundColor('#FFFFFF').borderRadius(CARD_RADIUS).border({width:1,color:'rgba(200,180,140,0.20)'}).padding({left:12,right:12}).onChange((v)=>{this.newTag=v})Button('添加').height(44).fontSize(14).fontColor('#FFFFFF').fontWeight(FontWeight.Bold).backgroundColor(COLOR_PRIMARY).borderRadius(CARD_RADIUS).padding({left:16,right:16}).onClick(()=>{if(this.newTag.trim().length>0){this.tags=[...this.tags,this.newTag.trim()]this.newTag=''}})}

五、CRUD 操作总结

操作	方法	触发 UI 更新
新增	`this.tags = [...this.tags, newTag]`	创建新数组
删除	`splice + this.tags = [...this.tags]`	创建新数组
更新	直接修改后`this.tags = [...this.tags]`	创建新数组