前言海风日记的标签管理页面支持标签的增删改查通过编辑模式切换标签列表的显示和操作状态。本文将从TagManagePage.ets源码出发深入讲解标签管理的 CRUD 实现。一、标签管理状态EntryComponentstruct TagManagePage{Statetags:string[][海边,美食,旅行,读书,工作,运动,朋友,家人]StatenewTag:stringStateediting:booleanfalse}二、编辑模式切换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.newTagv})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().length0){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]创建新数组六、总结本文通过海风日记的标签管理页面深入讲解了 CRUD 标签管理的实现编辑模式切换编辑状态标签删除编辑模式显示删除按钮标签新增输入框 添加按钮UI 更新创建新数组触发渲染下一篇文章开始进入第九系列登录与账号体系敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源TextInput 组件文档State 装饰器文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区