鸿蒙 ArkTS 实战：Community Vote Box 从社区记录到状态看板完整解析

前言

Community Vote Box 是一个面向社区服务和邻里协作的鸿蒙 ArkTS 示例应用，中文场景可以理解为“社区投票箱”。社区投票箱用于发布花园改造、安静时段等议题，并跟踪匿名投票、结果统计和公告记录。

社区投票的重点是议题清楚、票数可见、结果能形成公告闭环。 项目使用 ArkTS 接口建模、@State 状态驱动、ArkUI 声明式布局、数量统计 和 活跃状态 组成完整单页工具。

在这里插入图片描述

页面示意图对应 Community Vote Box 的信息架构：顶部展示数量和状态比例，中部呈现场景能力标签，底部提供新增记录和列表处理。

社区类工具的核心不是堆功能，而是让需求、响应、状态和备注在同一个页面里保持一致。

一、项目定位与业务目标

1.1 场景拆解

社区投票箱 的基础对象是一条社区记录，用户需要同时看到标题、数量、备注和活跃状态。
源码默认记录包含 Garden renovation 和 Quiet hours，数量分别是 42 与 31。
amount 字段在这里表示投票数量，单位可以理解为票。

业务元素 项目表达 用户收益
记录标题 title 快速识别社区投票箱事项
数量指标 amount 汇总投票数量
备注说明 note 保存联系人、证明、时间或处理说明
状态字段 active 表示活跃状态

1.2 核心用户路径

  1. 打开页面查看顶部数量统计。
  2. 通过四个功能标签理解社区服务范围。
  3. 填写标题、数量和备注。
  4. 点击 Add item 新增记录。
  5. 通过复选框调用 toggleActive 更新状态。

1.3 社区价值

在 Community Vote Box 中，社区价值服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

二、源码结构总览

2.1 页面文件位置

在 Community Vote Box 中，页面文件位置服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

2.2 代码层次

在 Community Vote Box 中，代码层次服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

2.3 职责边界

在 Community Vote Box 中，职责边界服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

三、数据模型设计

3.1 接口字段

在 Community Vote Box 中，接口字段服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

3.2 字段语义表

字段 类型 当前含义 页面位置
title string 社区投票箱记录标题 列表主标题
amount number 投票数量 统计区和行尾数字
note string 备注说明 列表副文本
active boolean 活跃状态 复选框和背景色

3.3 模型特点

在 Community Vote Box 中，模型特点服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

四、状态管理解析

4.1 状态变量清单

在 Community Vote Box 中，状态变量清单服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

4.2 状态刷新机制

在 Community Vote Box 中，状态刷新机制服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

4.3 业务状态关系

在 Community Vote Box 中，业务状态关系服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

社区服务页面的可靠感来自一致反馈：数量变了，统计要变；状态变了，颜色和比例也要变。

五、数量统计逻辑

5.1 总量计算

在 Community Vote Box 中，总量计算服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

5.2 状态数量统计

在 Community Vote Box 中，状态数量统计服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

5.3 方法对比

方法 输入 输出 作用
totalAmount() items 数量总和 汇总投票数量
openCount() items 已激活数量 驱动状态比例
toggleActive(index) 列表索引 无 切换单条记录状态

六、新增记录流程

6.1 输入校验

在 Community Vote Box 中，输入校验服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

6.2 默认备注

在 Community Vote Box 中，默认备注服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

6.3 插入顺序

在 Community Vote Box 中，插入顺序服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

七、页面布局拆解

7.1 滚动容器

在 Community Vote Box 中，滚动容器服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

7.2 顶部统计区

在 Community Vote Box 中，顶部统计区服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

7.3 功能标签区

在 Community Vote Box 中，功能标签区服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

八、列表渲染与状态反馈

8.1 ForEach 渲染

在 Community Vote Box 中，ForEach 渲染服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

8.2 复选框状态

在 Community Vote Box 中，复选框状态服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

8.3 视觉反馈

在 Community Vote Box 中，视觉反馈服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

社区服务页面的可靠感来自一致反馈：数量变了，统计要变；状态变了，颜色和比例也要变。

九、ArkUI 组件使用

9.1 核心组件表

组件 用途 项目位置
Scroll 页面滚动 最外层容器
Column 垂直布局 页面主体、表单和卡片
Row 横向布局 顶部统计、开关行、列表行
TextInput 输入 标题、数量、备注
Toggle 开关和复选框 通知开关、状态确认
Button 提交 新增记录入口

9.2 输入组件

在 Community Vote Box 中，输入组件服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

9.3 按钮组件

在 Community Vote Box 中，按钮组件服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

十、社区工具扩展方向

10.1 本地持久化

在 Community Vote Box 中，本地持久化服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

10.2 通知提醒

在 Community Vote Box 中，通知提醒服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

10.3 数据导出

在 Community Vote Box 中，数据导出服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

十一、调试与验证

11.1 输入验证

在 Community Vote Box 中，输入验证服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

11.2 交互验证

在 Community Vote Box 中，交互验证服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

11.3 布局验证

在 Community Vote Box 中，布局验证服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

社区服务页面的可靠感来自一致反馈：数量变了，统计要变；状态变了，颜色和比例也要变。

十二、性能与可维护性

12.1 性能特征

在 Community Vote Box 中，性能特征服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

12.2 可维护性

在 Community Vote Box 中，可维护性服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

12.3 代码风格

在 Community Vote Box 中，代码风格服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

十三、完整代码片段串联

13.1 接口定义

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

CommunityItem 是 Community Vote Box 的数据契约，页面展示、统计和交互都围绕它展开。

13.2 状态初始化

@State items: CommunityItem[] = [
  { title: 'Garden renovation', amount: 42, note: 'Anonymous vote open', active: false },
  { title: 'Quiet hours', amount: 31, note: 'Notice log drafted', active: false }
];
@State titleText: string = '';
@State amountText: string = '';
@State noteText: string = '';
@State noticeOn: boolean = true;
@State status: string = 'Community board ready';

默认数据让页面打开后立即具备业务语境，也方便验证数量统计是否正确。

13.3 统计方法

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

private openCount(): number {
  let count = 0;
  this.items.forEach((item: CommunityItem) => {
    if (item.active) {
      count++;
    }
  });
  return count;
}

统计方法只读取数组并返回结果，不直接修改状态，适合在 UI 中反复调用。

13.4 新增方法

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 = 'Community item added';
}

新增方法完成数字转换、输入校验、数组插入、输入清空和状态提示。

13.5 切换方法

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

切换方法修改单条记录后重新展开数组，确保 ArkUI 能稳定刷新列表。

13.6 顶部 UI

Row({ space: 10 }) {
  Column({ space: 4 }) {
    Text('Votes').fontSize(13).fontColor('#475569')
    Text(String(this.totalAmount())).fontSize(24).fontWeight(FontWeight.Bold).fontColor('#0F766E')
  }.layoutWeight(1).padding(14).backgroundColor('#CCFBF1').borderRadius(8)
  Column({ space: 4 }) {
    Text('Active').fontSize(13).fontColor('#475569')
    Text(this.openCount() + '/' + this.items.length).fontSize(24).fontWeight(FontWeight.Bold).fontColor('#1D4ED8')
  }.layoutWeight(1).padding(14).backgroundColor('#DBEAFE').borderRadius(8)
}.width('100%')

顶部 UI 把社区事项总量和状态比例放在第一屏，降低判断成本。

13.7 输入 UI

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 item')
    .height(42)
    .width('100%')
    .onClick(() => this.addItem())
}.padding(14).backgroundColor('#F1F5F9').borderRadius(8)

输入区保持三个字段，让新增记录足够快，同时保留必要上下文。

13.8 列表 UI

ForEach(this.items, (item: CommunityItem, 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('#0F766E')
  }.padding(14).backgroundColor(item.active ? '#DCFCE7' : '#FFFFFF').borderRadius(8).width('100%')
})

列表 UI 同时承担浏览和状态切换，是整个页面的主要操作区。

十四、业务扩展补充

14.1 分类筛选

在 Community Vote Box 中，分类筛选服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

14.2 周期归档

在 Community Vote Box 中，周期归档服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

14.3 状态筛选

在 Community Vote Box 中，状态筛选服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

14.4 成员协作

在 Community Vote Box 中，成员协作服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

14.5 趋势统计

在 Community Vote Box 中，趋势统计服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

14.6 公告同步

在 Community Vote Box 中，公告同步服务于社区投票箱这个具体场景，目标是让社区记录和活跃状态同步可见。
页面通过 items 管理记录数组，通过 totalAmount() 汇总投票数量，通过 openCount() 统计已激活记录。
当用户新增或勾选记录时，@State 会推动顶部统计、列表数字和行背景同步刷新。

  • 业务对象：社区投票箱
  • 核心指标：投票数量
  • 关键方法：totalAmount()、openCount()、addItem()、toggleActive()

十五、总结

15.1 技术收束

Community Vote Box 用单页 ArkTS 代码完成了围绕社区投票箱的社区服务工具。
项目通过 CommunityItem 建模，用 items 管理数组，再通过 totalAmount()、openCount()、addItem() 和 toggleActive() 形成完整交互闭环。
这种实现适合学习鸿蒙 ArkUI 的声明式开发，也适合作为社区服务类应用接入存储、通知和协作能力的原型基础。

15.2 实践价值

Community Vote Box 用单页 ArkTS 代码完成了围绕社区投票箱的社区服务工具。
项目通过 CommunityItem 建模，用 items 管理数组，再通过 totalAmount()、openCount()、addItem() 和 toggleActive() 形成完整交互闭环。
这种实现适合学习鸿蒙 ArkUI 的声明式开发，也适合作为社区服务类应用接入存储、通知和协作能力的原型基础。

15.3 最终结论

Community Vote Box 用单页 ArkTS 代码完成了围绕社区投票箱的社区服务工具。
项目通过 CommunityItem 建模，用 items 管理数组，再通过 totalAmount()、openCount()、addItem() 和 toggleActive() 形成完整交互闭环。
这种实现适合学习鸿蒙 ArkUI 的声明式开发，也适合作为社区服务类应用接入存储、通知和协作能力的原型基础。

{
  "name": "Community Vote Box",
  "scene": "社区投票箱",
  "metric": "投票数量",
  "statusField": "active"
}

hvigorw assembleHap

- 记录标题：Garden renovation
- 数量指标：42票
- 备注说明：Anonymous vote open

相关资源：

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

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

更多推荐

解决昇腾910B多容器部署Qwen3.6-27b引发的HCCL通信端口冲突问题

本文针对华为昇腾910B多容器并行部署场景，分析了同时运行Qwen3.6-27B与BGE-M3模型时HCCL集合通信端口冲突问题。通过为每个张量并行进程组分配独立的HCCL_NPU_SOCKET_PORT_RANGE端口区间，结合ASCEND_RT_VISIBLE_DEVICES实现NPU卡隔离，解决了多容器多模型并行推理的通信冲突，方案已在8卡环境中验证稳定。

avatar 人工智能6S服务平台
cover

CANN HCCL：分布式训练的集合通信底座

avatar 人工智能6S服务平台
cover

CANN ascend-run：运行时与算子执行生命周期

avatar 人工智能6S服务平台