open harmony 项目实战：给语文学习 App 做一个高端精致的沉浸式界面

在移动端教育类 App 中，“好看”并不只是颜色柔和、卡片圆角这么简单。一个真正精致的 OpenHarmony 应用，需要同时照顾沉浸式视觉、安全区、暗色模式、页面切换动效和底部导航的触感反馈。

这次我基于自己的语文学习项目“语文视界”，整理一下如何用 ArkTS 做出更完整的视觉与交互体验 ✨。这个项目包含首页推荐、诗词列表、诗词详情、阅读、字典、学习中心和我的页面，比较适合拿来拆解“高端精致”主题。

一、沉浸式窗口：让内容真正融入屏幕

项目在 EntryAbility.ets 中统一处理窗口初始化：监听窗口尺寸、计算系统避让区、开启全屏布局，并把安全区高度写入 AppStorage，供页面层复用。

const avoid = mainWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
const topVp = avoidPxToVp(avoid.topRect.height);
const bottomVp = 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。

export class ThemeColors {
  constructor(isDark: boolean) {
    this.isDark = isDark;
  }

  get backgroundColor(): string {
    return this.isDark ? '#1A1A2E' : '#FFF9F0';
  }

  get cardBackground(): string {
    return this.isDark ? '#2D2D44' : '#FFFFFF';
  }

  get textPrimary(): string {
    return this.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 的完成度 🚀。