鸿蒙 ArkTS 状态管理实战：为公交出行模板动态新增一条资讯

引言

在鸿蒙应用开发中，状态管理是决定界面能否正确响应数据变化的核心机制。最近我在鸿蒙开发实践中心的公交出行应用模板（基于 ArkTS/ArkUI）上做二次开发时，遇到一个典型需求：在首页资讯列表中动态新增一条演示资讯，并让列表和详情页同步刷新。本文记录完整的实现思路与代码。

案例背景

公交出行模板的首页资讯由 feature/frontpage/src/main/ets/mock/MockData.ets 中的 newsData 数组驱动。首页用 ForEach 渲染列表，点击某条资讯后，详情页固定读取 newsDetailPiece[0]。这意味着：新增资讯不能只往数组里 push 一条数据，还要处理列表 id 到详情的映射，以及缺失数据的回退。

核心概念：@State 与 @Observed

ArkTS 提供了多层级的状态管理装饰器：

• @State：组件内部状态，数据变化触发 UI 刷新；
• @Observed + @ObjectLink：嵌套对象的属性变化也能被观测到；
• @Provide / @Consume：跨组件层级共享状态。

对于资讯列表这种"数组 + 嵌套对象"的结构，推荐用 @Observed 修饰数据模型类，再用 @ObjectLink 在子组件中引用。

实战步骤

1. 定义数据模型

@Observed
export class NewsItem {
  id: number;
  title: string;
  summary: string;
  publishTime: string;

  constructor(id: number, title: string, summary: string, publishTime: string) {
    this.id = id;
    this.title = title;
    this.summary = summary;
    this.publishTime = publishTime;
  }
}

2. 在页面中声明状态

@Component
struct NewsListPage {
  @State newsList: NewsItem[] = [];

  aboutToAppear(): void {
    this.newsList = MockData.newsData.map((item) =>
      new NewsItem(item.id, item.title, item.summary, item.publishTime));
  }
}

3. 渲染列表并新增资讯

build() {
  Column() {
    List() {
      ForEach(this.newsList, (item: NewsItem) => {
        ListItem() {
          NewsCard({ news: item })
        }
      }, (item: NewsItem) => item.id.toString())
    }
    Button('新增一条演示资讯')
      .onClick(() => {
        const newId = this.generateUniqueId();
        this.newsList.push(new NewsItem(
          newId,
          '早晚高峰新增两条公交专线',
          '为缓解早晚高峰客流压力，本市将于下周一起开通两条公交专线……',
          '2026-11-03'
        ));
      })
  }
}

private generateUniqueId(): number {
  const ids = this.newsList.map(item => item.id);
  return ids.length === 0 ? 1 : Math.max(...ids) + 1;
}

注意 ForEach 的第三个参数是键值生成函数，用唯一 id 作为 key，可以避免列表刷新时出现错位。

4. 处理详情页映射与回退

由于详情页原本固定读取 newsDetailPiece[0]，新增资讯后需要按 id 查找：

private findNewsDetail(id: number): NewsDetail | undefined {
  return MockData.newsDetailPiece.find(detail => detail.id === id);
}

// 在详情页构建时做回退
aboutToAppear(): void {
  const detail = this.findNewsDetail(this.newsId);
  this.currentDetail = detail ?? this.buildFallbackDetail();
}

private buildFallbackDetail(): NewsDetail {
  // 缺失回退：用列表项的标题和摘要拼出默认详情，避免白屏
  return new NewsDetail(this.newsId, this.newsTitle, this.newsSummary, '暂无正文');
}

注意事项

1. id 必须唯一：新增资讯前先扫描现有 id，用最大值 +1 生成，避免 key 冲突导致渲染错乱。
2. 不要只改列表：同步检查详情页的数据来源，否则点击新增资讯会打开别人的详情。
3. 空值要有回退：任何按 id 查找的地方都要处理 undefined，给用户一个可理解的默认页，而不是白屏或闪退。
4. 性能：资讯量大时把 ForEach 换成 LazyForEach，配合数据源实现按需加载。

总结

这次实战的核心收获是：鸿蒙 ArkTS 的状态管理并不复杂，关键是选对装饰器、保证 key 唯一、处理好边界回退。掌握这套模式后，类似的"列表 + 详情"页面都可以快速扩展。希望这篇记录能帮到同样在做鸿蒙模板二次开发的同学。