【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用于保存收藏 IDtodayItem用于展示今日推荐。四、初始化日期页面出现时生成当前日期aboutToAppear():void{constnow newDate();constyear now.getFullYear();constmonth now.getMonth() 1;constday now.getDate();this.currentMonthyear年month月;this.currentDateyear- (month10?0:) month- (day10?0:) day;this.todayItemthis.getTodayItem(); }这种写法可以让页面标题显示当前月份并尝试匹配当天内容。五、搜索与分类过滤核心过滤逻辑如下getFilteredList():DailyPoliticsItem[] {letfiltered this.politicsList;if(this.selectedCategory!全部) { filtered filtered.filter((item: DailyPoliticsItem) item.categorythis.selectedCategory); }if(this.searchKeyword.length0) {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; }如果没有当天内容就回退到第一条。这样页面不会空掉。七、收藏实现收藏逻辑使用数组记录 IDtoggleFavorite(itemId:number):void{constidx this.favoriteItems.indexOf(itemId);if(idx 0) {this.favoriteItemsthis.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 不再只是做题而是把现实材料引入学习过程。通过搜索、分类、收藏和详情弹层用户可以像阅读轻量资讯一样接触政治知识。后续可以继续扩展阅读记录持久化、收藏同步到首页、根据教材知识点推荐时政材料。这样每日政治就能成为连接教材与现实的桥梁