鸿蒙 ArkTS 实战：Notification Organizer 从系统能力到状态管理完整解析

前言

Notification Organizer 是一个面向 通知整理器 的鸿蒙 ArkTS 单页工具。项目通过记录列表、统计卡片、权限开关和状态切换，把系统能力相关场景整理成可操作的移动端页面。

它服务于 整理快递、银行等通知，记录稍后提醒和关键词搜索。对 消息重度用户、客服人员、效率工具用户 来说，重点是让权限、数量、备注和当前状态在一个页面里清楚呈现。

业务痛点：通知堆积后，重要消息容易被淹没，稍后提醒和关键词检索会变得很关键。

在这里插入图片描述

图示说明：本文围绕 Notification Organizer 的模型、统计、权限提示和列表状态切换展开。

一、业务定位与产品目标

1.1 使用场景

把通知主题、数量、提醒备注和活跃状态集中展示，方便用户筛选重点通知。 当前实现是一个前端工作台雏形，后续可以继续接入真实系统能力。

1.2 页面能力概览

当前页面包含四个关键区域：

  1. 顶部标题，确认工具场景。

  2. 统计卡片，展示 Notices 和 Active。

  3. 功能标签，提示能力边界。

  4. 表单和列表，完成新增、展示和状态切换。

页面区域 实现元素 业务作用
标题区 Text 标识通知整理器
统计区 totalAmount / selectedCount 统计通知数量和活跃状态
标签区 四个 Text 标签 提示系统能力
列表区 ForEach 展示记录并切换状态

二、工程结构与入口文件

2.1 目录结构

项目采用标准 Stage 工程，主页面位于 entry/src/main/ets/pages/Index.ets。这种结构方便从页面直接理解交互逻辑。

entry/
  src/
    main/
      ets/
        entryability/
          EntryAbility.ets
        pages/
          Index.ets
      module.json5

2.2 入口配置理解

系统能力类工具后续往往会接入权限、后台服务或设备 API，但页面加载仍然从 Ability 入口开始。

{
  "module": {
    "name": "entry",
    "type": "entry",
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ets",
        "exported": true
      }
    ]
  },
  "topic": "通知整理器"
}

三、数据模型：记录条目的最小闭环

3.1 字段设计

CapabilityItem 使用 title、amount、note、active 四个字段描述一条记录。它们分别对应对象、数量、备注和状态。

interface CapabilityItem {
  title: string;
  amount: number;
  note: string;
  active: boolean;
}

@State items: CapabilityItem[] = [
  { title: 'Delivery notice', amount: 1, note: 'Remind later 18:00', active: false },
  { title: 'Bank message', amount: 1, note: 'Keyword: card', active: false }
];

3.2 默认数据分析

默认数据体现了项目的业务方向，也方便首次运行时验证统计区和列表区。

默认标题 数量 备注 Active
Delivery notice 1 Remind later 18:00 false
Bank message 1 Keyword: card false

这些默认数据覆盖 重要保存、分类查看、稍后提醒 和 关键词搜索，不是空泛占位。

四、状态管理：输入与权限提示

4.1 页面状态字段

页面使用 @State 管理输入框、权限开关和状态文案。permissionOn 是权限提示开关，不直接操作系统权限，但承担用户提示职责。

@State titleText: string = '';
@State amountText: string = '';
@State noteText: string = '';
@State permissionOn: boolean = true;
@State status: string = 'System demo ready';

4.2 输入隔离

输入框内容先保存在临时状态中，点击新增并通过校验后才进入正式列表。

关键点：系统能力类页面需要把权限提示、操作记录和状态反馈摆在用户能看到的位置。

五、统计逻辑：总量与活跃数

5.1 总量统计

totalAmount() 遍历 items，把 amount 相加为 Notices。

5.2 活跃统计

selectedCount() 统计 active 为 true 的记录，并展示为活跃数与总数的比例。

private totalAmount(): number {
  let total = 0;
  this.items.forEach((item: CapabilityItem) => {
    total += item.amount;
  });
  return total;
}

private selectedCount(): number {
  let count = 0;
  this.items.forEach((item: CapabilityItem) => {
    if (item.active) {
      count++;
    }
  });
  return count;
}
函数 统计来源 页面位置 业务意义
totalAmount amount Notices 掌握通知数量规模
selectedCount active Active 掌握当前活跃记录
toggleActive index 列表勾选 切换单条状态

六、新增记录流程

6.1 校验规则

新增时会检查标题和数量。标题为空或数量非法时，状态文案提示用户修正输入。

6.2 顶部插入

新记录插入到数组最前面，因此最新任务总能优先显示。

private addItem(): void {
  const amount = Number(this.amountText);
  if (this.titleText.trim().length === 0 || !Number.isFinite(amount)) {
    this.status = 'Enter title and valid number';
    return;
  }
  this.items = [{
    title: this.titleText,
    amount: Math.round(amount),
    note: this.noteText.length > 0 ? this.noteText : 'No note yet',
    active: false
  }, ...this.items];
  this.titleText = '';
  this.amountText = '';
  this.noteText = '';
  this.status = 'Record added';
}

七、状态切换与刷新机制

7.1 切换逻辑

勾选列表项时会反转 active 字段，并通过数组展开生成新引用，保证 UI 刷新。

private toggleActive(index: number): void {
  this.items[index].active = !this.items[index].active;
  this.items = [...this.items];
}

7.2 视觉反馈

active 为 true 的记录使用浅绿色背景，未激活记录保持白色。

状态 背景色 用户感知
未激活 #FFFFFF 仍需处理或观察
已激活 #DCFCE7 当前重点或已启用
输入异常 状态文案 需要修正输入

八、统计卡片与能力标签

8.1 顶部统计卡片

顶部双卡片分别展示业务总量和活跃状态，蓝色强调数量，绿色强调状态。

Row({ space: 10 }) {
  Column({ space: 4 }) {
    Text('Notices').fontSize(13).fontColor('#475569')
    Text(String(this.totalAmount())).fontSize(24).fontWeight(FontWeight.Bold).fontColor('#1D4ED8')
  }.layoutWeight(1).padding(14).backgroundColor('#DBEAFE').borderRadius(8)
  Column({ space: 4 }) {
    Text('Active').fontSize(13).fontColor('#475569')
    Text(this.selectedCount() + '/' + this.items.length).fontSize(24).fontWeight(FontWeight.Bold).fontColor('#047857')
  }.layoutWeight(1).padding(14).backgroundColor('#D1FAE5').borderRadius(8)
}

8.2 功能标签解读

四个标签分别是 Important save、Category view、Remind later、Keyword search。

  • 重要保存：确认能力入口。

  • 分类查看：表达核心操作。

  • 稍后提醒：补充过程状态。

  • 关键词搜索：保留后续处理依据。

九、表单与列表渲染

9.1 表单区域

表单由标题、数量和备注三个输入框组成，配合按钮完成记录创建。

Column({ space: 10 }) {
  TextInput({ placeholder: 'Title', text: this.titleText })
    .onChange((value: string) => this.titleText = value)
  TextInput({ placeholder: 'Number', text: this.amountText })
    .type(InputType.Number)
    .onChange((value: string) => this.amountText = value)
  TextInput({ placeholder: 'Note', text: this.noteText })
    .onChange((value: string) => this.noteText = value)
  Button('Add record')
    .height(42)
    .width('100%')
    .onClick(() => this.addItem())
}

9.2 列表区域

列表用 ForEach 渲染，每行包括 checkbox、标题、备注和数量。

ForEach(this.items, (item: CapabilityItem, index: number) => {
  Row() {
    Toggle({ type: ToggleType.Checkbox, isOn: item.active })
      .onChange(() => this.toggleActive(index))
    Column({ space: 6 }) {
      Text(item.title).fontSize(18).fontWeight(FontWeight.Bold).fontColor('#111827')
      Text(item.note).fontSize(14).fontColor('#475569')
    }.layoutWeight(1).margin({ left: 8 })
    Text(String(item.amount)).fontSize(18).fontWeight(FontWeight.Bold).fontColor('#1D4ED8')
  }.padding(14)
   .backgroundColor(item.active ? '#DCFCE7' : '#FFFFFF')
   .borderRadius(8)
   .width('100%')
})

十、业务流程复盘

10.1 标准路径

Notification Organizer 的一次完整使用可以拆成四步：

  1. 录入通知主题。
  2. 填写通知数量。
  3. 备注提醒或关键词。
  4. 切换关注状态。

10.2 异常路径

当标题为空或数量非法时，新增动作会被拦截，避免无效记录进入正式列表。

const amount = Number(this.amountText);
const invalid = this.titleText.trim().length === 0 || !Number.isFinite(amount);
if (invalid) {
  this.status = 'Enter title and valid number';
}

十一、扩展设计

11.1 持久化模型

正式应用可以增加 id、更新时间和权限状态，方便同步、搜索和审计。

interface PersistedCapabilityItem {
  id: string;
  title: string;
  amount: number;
  note: string;
  active: boolean;
  updatedAt: number;
}

11.2 系统能力扩展

后续可以接入通知监听、分类规则、稍后提醒和全文检索。

扩展顺序建议为：

  1. 增加本地持久化，保证记录不丢失。

  2. 接入真实系统能力或权限 API。

  3. 增加历史搜索、导出和异常处理。

十二、调试与验证

12.1 核心验证点

验证时重点检查新增、统计、状态切换、背景变化和错误提示。

12.2 运行检查

可以在 DevEco Studio 中运行预览或真机，按输入、切换、复盘路径逐项验证。

# 常规验证动作
# 1. 输入标题、数量和备注
# 2. 点击 Add record
# 3. 检查新记录是否位于顶部
# 4. 勾选记录并观察 Active 统计
验证项 预期结果 业务意义
有效新增 列表顶部出现新记录 快速沉淀现场信息
空标题 显示错误状态 避免无效记录
勾选状态 统计和背景同步变化 明确当前状态
空备注 写入 No note yet 保持列表可读

十三、可复用的系统能力模式

13.1 通用公式

这类应用可以抽象为一个通用公式：能力对象、数量口径、上下文备注、活跃状态。

能力对象 + 数量口径 + 上下文备注 + 活跃状态 = 可复用的系统能力工作台

13.2 复用边界

复用时要同步调整默认数据、统计口径、功能标签和业务说明，不能只替换标题。

总结

Notification Organizer 用简洁的 ArkTS 单页结构实现了 通知整理器 的记录、统计、权限提示和活跃状态切换。它为后续接入真实系统能力提供了清晰页面基础。

对 消息重度用户、客服人员、效率工具用户 来说，这种工具能降低状态确认和信息复盘成本。补齐系统 API、持久化和异常处理后，可以继续演进为更完整的实用工具。

如果这篇文章对你有帮助，可以点赞、收藏并关注，后续会继续拆解更多鸿蒙 ArkTS 实战项目。

相关资源：

# harmonyos # 华为
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

cover

【昇腾】基于昇腾适配的GPToss大模型性能优化实操指南

avatar 人工智能6S服务平台

从慢得离谱到性能翻倍：昇腾910B迁移小模型MobileNet避坑与调优实录

一开始觉得是.to('cpu')慢，结果完全不是。性能问题必须用工具定位，Python层面的计时在异步场景下不可靠。尤其是在涉及NPU/GPU异步计算时，不加测出来的时间都是假的。对于ResNet18、MobileNet这种小计算量模型，调度开销是杀手，开启任务队列优化是必须的。MindStudio的Timeline视图非常直观，能精确到每个算子的微秒级耗时。这个工具一定要学会用。同时昇腾NPU首

avatar 人工智能6S服务平台

HarmonyOS ArkUI DatePicker / TimePicker 日期时间选择器完全指南

系列：鸿蒙 HarmonyOS 6.1 新特性实战 · 第 37 篇日期时间选择是几乎所有 App 都需要的功能。ArkUI 提供了内联式（嵌入页面）和弹窗式两种形态，分别对应 DatePicker/

avatar 人工智能6S服务平台