open harmony 项目实战：给语文学习 App 做一个高端精致的沉浸式界面
open harmony 项目实战：给语文学习 App 做一个高端精致的沉浸式界面
在移动端教育类 App 中，“好看”并不只是颜色柔和、卡片圆角这么简单。一个真正精致的 OpenHarmony 应用，需要同时照顾沉浸式视觉、安全区、暗色模式、页面切换动效和底部导航的触感反馈。
这次我基于自己的语文学习项目“语文视界”，整理一下如何用 ArkTS 做出更完整的视觉与交互体验 ✨。这个项目包含首页推荐、诗词列表、诗词详情、阅读、字典、学习中心和我的页面，比较适合拿来拆解“高端精致”主题。
一、沉浸式窗口：让内容真正融入屏幕
项目在EntryAbility.ets中统一处理窗口初始化：监听窗口尺寸、计算系统避让区、开启全屏布局，并把安全区高度写入AppStorage，供页面层复用。
constavoid = mainWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);consttopVp = avoidPxToVp(avoid.topRect.height);constbottomVp = avoidPxToVp(avoid.bottomRect.height); AppStorage.setOrCreate('safeAreaTopVp', topVp >0? topVp :48); AppStorage.setOrCreate('safeAreaBottomVp', bottomVp >0? bottomVp :0); mainWindow.setWindowLayoutFullScreen(true); mainWindow.setWindowSystemBarProperties({ statusBarColor:'#00000000', statusBarContentColor:'#FF333333'});这样做的好处是：页面不用各自猜测状态栏高度，而是从统一状态读取，既适配不同设备，也避免内容顶到挖孔、状态栏或底部手势区。
二、悬浮导航栏：比普通 Tabs 更有辨识度
项目没有直接做一个简单的系统 Tab，而是在Index.ets中用自定义底部导航承载 6 个一级入口：首页、诗词、阅读、字典、学习、我的。
底部导航的关键点有三个：
- 选中项使用彩色图标与文字加粗。
- 顶部添加反向阴影，形成轻微“悬浮”感。
- 点击切换时，页面内容有透明度和位移过渡。
Column(){Row(){ this.buildTabItem(0, '首页', $r('app.media.ic_home_normal'),$r('app.media.ic_home_selected')); this.buildTabItem(1, '诗词', $r('app.media.ic_poetry_normal'),$r('app.media.ic_poetry_selected')); this.buildTabItem(2, '阅读', $r('app.media.ic_reading_normal'),$r('app.media.ic_reading_selected')); this.buildTabItem(3, '字典', $r('app.media.ic_dict_normal'),$r('app.media.ic_dict_selected')); this.buildTabItem(4, '学习', $r('app.media.ic_learn_normal'),$r('app.media.ic_learn_selected')); this.buildTabItem(5, '我的', $r('app.media.ic_my_normal'),$r('app.media.ic_my_selected')); } .height(64) } .padding({ bottom:16+ this.safeAreaBottomVp }) .backgroundColor(this.theme.tabBarBg).shadow({ radius:20, color: 'rgba(0,0,0,0.12)', offsetY: -5});配合截图中的底部栏效果，整体会比普通导航更有“应用完成度”。🌸
三、主题系统：把颜色管理从页面里抽出来
精致感很大一部分来自一致性。项目里将颜色集中在ThemeColors.ets，通过isDark控制深浅色主题，而页面只需要引用this.theme.xxx。
exportclassThemeColors{constructor(isDark:boolean) {this.isDark= isDark; }getbackgroundColor():string{returnthis.isDark?'#1A1A2E':'#FFF9F0'; }getcardBackground():string{returnthis.isDark?'#2D2D44':'#FFFFFF'; }gettextPrimary():string{returnthis.isDark?'#FFFFFF':'#4A4A4A'; } }这种方式比在页面中直接写一堆颜色值更稳定。后续如果想调整品牌色，只需要改主题类即可。
四、页面入场动画：让切换不生硬
首页、学习中心、我的页面都使用了透明度和位移组合动画。比如首页会按区块依次出现，让用户打开 App 时有一种轻盈的层次感。
animateTo({ duration: ANIM_DURATION.NORMAL, curve: ANIM_CURVES.SMOOTH }, () => {this.sec0Opacity =1;this.sec0TranslateY =0; });动画时长和曲线集中在AnimationUtils.ets中，后续维护起来也更方便。
五、诗词详情页：内容阅读体验比功能堆砌更重要
诗词详情页采用标题区、正文卡片、标签、注释、译文、赏析分块展示。注释/译文/赏析还做了展开收起，避免一屏信息过载。
PoetryExpandBlock({ title:'☆ 注释', content:this.poetry ?this.sanitizeAuxText(this.poetry.notes) :'', expanded: $showNotes, theme:this.theme });对语文学习应用来说，这种“先读诗，再展开理解”的节奏，比一次性把所有内容铺满屏幕更友好。
总结
这次项目里让我感受最明显的是：OpenHarmony 的界面精致感并不是靠单个组件完成的，而是由窗口沉浸、安全区、主题系统、动效、导航和内容排版共同组成。
如果后续继续优化，还可以加入更细腻的毛玻璃导航、滚动联动标题、页面共享元素动画，让“语文视界”的视觉体验更接近高端 App 的完成度 🚀。