羽球联盟 HarmonyOS NEXT 实战系列 (15/20)：球员动态、关注状态与分类过滤

wangji93

242人浏览 · 2026-07-06 23:58:26

wangji93 共创先锋 · 2026-07-06 23:58:26 发布

文章导读

球员页同时承担“浏览人物信息”和“维护关注状态”两类任务。
关注数据通过 @StorageLink('follows') 直接驱动，详情页和个人中心都能共享同一份状态。
分类过滤既支持中国队，也支持男单、女单、男双、女双、混双等项目维度。

页面效果

球员动态页比普通列表页更容易暴露状态问题。用户点下关注按钮后，既期待当前卡片马上变化，也期待个人中心的关注数量跟着变化；如果两边不一致，这个页面的可信度就会明显下降。
球员动态与关注入口

从视觉上看，这页只是一个带分类 Tab 的球员列表；从交互上看，它同时连接了人物卡片、关注状态、个人中心统计和详情跳转，所以非常适合拿来讲响应式状态和列表过滤是如何配合的。

实战拆解

PlayerFeedPage 最重要的状态不是 selected，而是 @StorageLink('follows')。只要关注列表来自 AppStorage，当前页的关注按钮、个人中心的关注数量，以及未来可能加入的“只看已关注球员”能力，看到的就都是同一份数据。相比手动在多个页面里各自维护关注布尔值，这种方式更稳，也更符合 ArkUI 的数据驱动思路。

页面还做了一个很实用的复用设计：通过 embedded 参数控制标题区域。如果球员页被嵌进底部 Tab，就展示轻量标题行；如果它作为独立页面打开，就走完整 NavBar。这样列表内容、过滤逻辑和关注逻辑都能复用，不需要复制出两套页面。

分类过滤部分也值得讲清楚。中国队这个 Tab 使用 team === '中国队'，其余项目 Tab 则通过稳定的类别值 ms、ws、md、wd、xd 过滤。文案面向中文读者，逻辑值保持短枚举，这样后续无论调整文案还是扩展国际选手，都不会让过滤规则变得混乱。

关键代码

@Component
export struct PlayerFeedPage {
  embedded: boolean = false;
  @State selected: number = 0;
  @State isRefreshing: boolean = false;
  @StorageLink('follows') follows: string[] = [];
  @StorageProp('remote_players') remotePlayers: Player[] = [];
  private tabs: string[] = ['全部', '中国队', '男单', '女单', '男双', '女双', '混双'];

  private filtered(): Player[] {
    const src: Player[] = this.source();
    if (this.selected === 0) {
      return src;
    }
    if (this.selected === 1) {
      return src.filter((p: Player) => p.team === '中国队');
    }
    const map: string[] = ['', '', 'ms', 'ws', 'md', 'wd', 'xd'];
    const cat: string = map[this.selected];
    return src.filter((p: Player) => p.category === cat);
  }
}