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