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

前言

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

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

一、标签管理状态

typescript 复制代码

@Entry
@Component
struct TagManagePage {
  @State tags: string[] = ['海边', '美食', '旅行', '读书', '工作', '运动', '朋友', '家人']
  @State newTag: string = ''
  @State editing: boolean = false
}

二、编辑模式切换

typescript 复制代码

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 })

三、标签删除

typescript 复制代码

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 更新
  })
}

四、标签新增

typescript 复制代码

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
开源鸿蒙跨平台社区