open harmony 项目实战诗词详情页的阅读体验优化诗词详情页是“语文视界”里最重要的页面之一。因为用户进入详情页后不只是看标题和正文还希望看到作者、朝代、标签、注释、译文、赏析甚至希望在横排和竖排之间切换。这篇文章就来聊聊如何用 OpenHarmony/ArkTS 做一个更舒服的诗词阅读详情页。一、详情页需要承载什么诗词详情页的核心内容包括标题作者和朝代诗词正文年级、主题等标签注释译文赏析收藏操作横排/竖排切换如果全部直接铺开页面会很长也容易让用户觉得压力大。所以项目采用了“核心内容优先辅助内容折叠”的方式。二、通过 AppStorage 获取详情 id进入详情页之前主入口会写入诗词 idAppStorage.setOrCreate(nav_poetry_id,poetryId);AppStorage.setOrCreate(current_view, poetry_detail);详情页在aboutToAppear中读取aboutToAppear(): void {constpoetryId AppStorage.getnumber(nav_poetry_id);if(poetryId ! undefined poetryId 0) {this.poetryId poetryId;this.loadPoetryDetail(); } }然后通过 ViewModel 加载数据privateloadPoetryDetail(): void {constdetail poetryViewModel.getPoetryDetail(this.poetryId);if(detail) {this.poetry detail;this.isFavorite detail.isFavorite; } }这里顺便会记录阅读历史方便“我的页面”展示阅读数量。三、页面状态设计详情页包含多个状态Statepoetry: Poetry | null null;StatepoetryId: number 0;StateisFavorite: boolean false;StateshowNotes: boolean false;StateshowTranslation: boolean false;StateshowAppreciation: boolean false;StateisVerticalLayout: boolean false;这些状态分别控制数据、收藏、折叠面板和排版模式。状态拆得清楚页面逻辑就不会混在一起。四、展开收起组件注释、译文、赏析使用了同一个PoetryExpandBlock组件Componentstruct PoetryExpandBlock {Linkexpanded: boolean;Proptitle: string ;Propcontent: string ;Proptheme: ThemeColors new ThemeColors(false); private flipExpanded(): void { this.expanded !this.expanded; } }使用时非常简单PoetryExpandBlock({ title:☆ 注释, content:this.poetry ?this.sanitizeAuxText(this.poetry.notes) :, expanded: $showNotes, theme:this.theme });Link让子组件可以直接改变父组件传入的展开状态这一点很适合做折叠面板。五、为什么要清洗辅助文本项目数据中有些注释、译文、赏析可能是占位符比如“注”“译”“赏”。如果直接展示会显得很奇怪。所以详情页做了一层清洗privatesanitizeAuxText(raw: string): string {constt raw.trim();if(t.length 0) {return; }if(t 注|| t 译|| t 赏) {return; }if(t 注释|| t 译文|| t 赏析) {return; }returnraw; }这样没有有效内容时页面会显示“暂无内容”而不是把占位文本暴露给用户。六、收藏操作收藏状态由PoetryViewModel管理privatetoggleFavorite(): void {this.isFavorite poetryViewModel.toggleFavorite(this.poetryId); }页面只关心当前是否收藏具体数据保存逻辑放在 ViewModel 里。这种分工很清楚。七、空状态和加载态详情页不是只考虑正常情况还处理了未找到诗词的状态if(!this.poetry this.poetryId 0) { Text(加载中...); }else{ Text(没有找到该诗词); Text(可能已被移除 ♡); }学习类 App 很容易因为数据维护问题出现空内容提前做好兜底可以避免页面崩坏。八、阅读体验细节这个页面有几个值得保留的体验点主体内容用卡片承载阅读区更集中。注释、译文、赏析折叠降低信息密度。主题色跟随深浅色模式。返回按钮独立组件化。页面进入时有淡入动画。总结一个好的诗词详情页不应该只是把字段展示出来而应该考虑用户的阅读顺序先看标题和正文再看标签最后按需展开注释、译文和赏析。在 OpenHarmony 项目中通过状态管理、组件拆分、ViewModel 加载和主题系统可以比较自然地搭出一个完整的诗词阅读体验。