【OpenHarmony/HarmonyOs 】每日政治资讯页面：搜索、分类、收藏与详情弹层实现

政治学习离不开时政素材。为了让用户每天都能接触一点政治知识，政治视界 中设计了“每日政治”页面。它不是简单文章列表，而是包含日期、分类、搜索、收藏、今日推荐和详情弹层的内容模块。本文详细拆解实现过程 📰

一、页面目标

每日政治页面要解决：

• 展示当天时政内容；
• 支持分类筛选：政治、经济、文化、哲学；
• 支持关键词搜索；
• 支持收藏；
• 点击卡片打开详情；
• 根据日期显示“今天/昨天/几天前”。

这类页面适合作为学习 App 的内容输入入口，帮助学生把教材知识和现实热点联系起来。

二、数据模型

每日政治数据模型如下：

export interface DailyPoliticsItem {
  id: number;
  title: string;
  subtitle: string;
  content: string;
  imageName: string;
  category: string;
  grade: string;
  date: string;
  tags: string[];
  isFavorite: boolean;
  readCount: number;
}

字段比较完整：标题、副标题、正文、图片、分类、标签、收藏、阅读数都包含了。

三、页面状态设计

DailyPoliticsPage 中维护了列表、筛选、搜索和详情弹层状态：

@State politicsList: DailyPoliticsItem[] = sampleDailyPolitics;
@State selectedCategory: string = '全部';
@State currentDate: string = '';
@State selectedItem: DailyPoliticsItem | null = null;
@State showDetail: boolean = false;
@State favoriteItems: number[] = [];
@State searchKeyword: string = '';
@State todayItem: DailyPoliticsItem | null = null;

selectedItem 用于详情弹层，favoriteItems 用于保存收藏 ID，todayItem 用于展示今日推荐。

四、初始化日期

页面出现时生成当前日期：

aboutToAppear(): void {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth() + 1;
  const day = now.getDate();
  this.currentMonth = year + '年' + month + '月';
  this.currentDate = year + '-' + (month < 10 ? '0' : '') + month + '-' + (day < 10 ? '0' : '') + day;
  this.todayItem = this.getTodayItem();
}

这种写法可以让页面标题显示当前月份，并尝试匹配当天内容。

五、搜索与分类过滤

核心过滤逻辑如下：

getFilteredList(): DailyPoliticsItem[] {
  let filtered = this.politicsList;
  if (this.selectedCategory !== '全部') {
    filtered = filtered.filter((item: DailyPoliticsItem) => item.category === this.selectedCategory);
  }
  if (this.searchKeyword.length > 0) {
    const kw = this.searchKeyword.toLowerCase();
    filtered = filtered.filter((item: DailyPoliticsItem) =>
      item.title.toLowerCase().includes(kw) ||
      item.subtitle.toLowerCase().includes(kw) ||
      item.content.toLowerCase().includes(kw) ||
      item.tags.some((tag: string) => tag.toLowerCase().includes(kw))
    );
  }
  return filtered;
}

搜索覆盖标题、副标题、正文和标签，能满足内容检索需求。

六、今日内容匹配

getTodayItem(): DailyPoliticsItem | null {
  const todayStr = this.currentDate;
  for (let i = 0; i < this.politicsList.length; i++) {
    if (this.politicsList[i].date === todayStr) {
      return this.politicsList[i];
    }
  }
  return this.politicsList.length > 0 ? this.politicsList[0] : null;
}

如果没有当天内容，就回退到第一条。这样页面不会空掉。

七、收藏实现

收藏逻辑使用数组记录 ID：

toggleFavorite(itemId: number): void {
  const idx = this.favoriteItems.indexOf(itemId);
  if (idx >= 0) {
    this.favoriteItems = this.favoriteItems.filter((id: number) => id !== itemId);
  } else {
    const newFavorites: number[] = this.favoriteItems.slice();
    newFavorites.push(itemId);
    this.favoriteItems = newFavorites;
  }
}

注意这里没有直接修改原数组，而是创建新数组再赋值。这有利于 ArkUI 识别状态变化。

八、详情弹层

点击文章卡片后：

openDetail(item: DailyPoliticsItem): void {
  this.selectedItem = item;
  this.showDetail = true;
  setTimeout(() => {
    this.detailAnimVisible = true;
  }, 10);
}

closeDetail(): void {
  animateTo({ duration: 200, curve: Curve.EaseIn }, () => {
    this.detailAnimVisible = false;
  });
  setTimeout(() => {
    this.showDetail = false;
    this.selectedItem = null;
  }, 200);
}

这里通过 showDetail 控制弹层是否存在，通过 detailAnimVisible 控制动画状态。关闭时先播放动画，再清空数据。

九、实现流程总结

定义 DailyPoliticsItem
  ↓
准备时政数据和图片资源
  ↓
页面初始化当前日期
  ↓
匹配今日内容
  ↓
分类与关键词过滤
  ↓
点击卡片打开详情弹层
  ↓
收藏状态写入 favoriteItems

十、结语

每日政治页面让学习 App 不再只是做题，而是把现实材料引入学习过程。通过搜索、分类、收藏和详情弹层，用户可以像阅读轻量资讯一样接触政治知识。

后续可以继续扩展：阅读记录持久化、收藏同步到首页、根据教材知识点推荐时政材料。这样每日政治就能成为连接教材与现实的桥梁 🌉