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

【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中维护了列表、筛选、搜索和详情弹层状态：

@StatepoliticsList: DailyPoliticsItem[] = sampleDailyPolitics;@StateselectedCategory: string ='全部';@StatecurrentDate: string ='';@StateselectedItem: DailyPoliticsItem | null = null;@StateshowDetail: boolean = false;@StatefavoriteItems: number[] = [];@StatesearchKeyword: string ='';@StatetodayItem: DailyPoliticsItem | null = null;

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

四、初始化日期

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

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

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

五、搜索与分类过滤

核心过滤逻辑如下：

getFilteredList():DailyPoliticsItem[] {letfiltered =this.politicsList;if(this.selectedCategory!=='全部') { filtered = filtered.filter((item: DailyPoliticsItem) =>item.category===this.selectedCategory); }if(this.searchKeyword.length>0) {constkw =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)) ); }returnfiltered; }

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

六、今日内容匹配

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

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

七、收藏实现

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

toggleFavorite(itemId:number):void{constidx =this.favoriteItems.indexOf(itemId);if(idx >=0) {this.favoriteItems=this.favoriteItems.filter((id:number) =>id !== itemId); }else{constnewFavorites: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 不再只是做题，而是把现实材料引入学习过程。通过搜索、分类、收藏和详情弹层，用户可以像阅读轻量资讯一样接触政治知识。

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

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