应用简介

《左右相册》是一款运行在 HarmonyOS 上的本地相册整理应用。它的核心理念只有一句话：像刷短视频一样，随机浏览照片与视频，用手势滑动完成取舍。鸿蒙应用市场搜索“左右相册”或点击下载

无需繁琐操作，纯手势驱动。左右滑动切换相册，直观感受清理后释放的存储空间，让"断舍离"变得轻松且有成就感。整理的过程中，你还会与那些久违的珍贵回忆不期而遇——原本枯燥的清理任务，就此变成一场充满惊喜的时光漫游。

---

功能亮点

• 手势驱动整理：左右滑动即可完成保留或删除，零学习成本。
• 随机浏览模式：打乱时间线，像刷短视频一样重新发现旧照片与视频。
• 存储空间可视化：实时展示清理后释放的空间，整理成就感拉满。
• 纯本地运行：应用不联网，所有数据留在设备本地，隐私有保障。
• 沉浸式悬浮导航：接入 HarmonyOS UI Design Kit，底部导航栏以悬浮形态呈现，视觉层次更丰富。

---

悬浮页签：一个细节带来的整体质感提升

什么是悬浮页签

传统底部导航栏横贯屏幕底部，占据固定空间，内容区域被硬性切割。悬浮页签（Floating Tab Bar）则不同——它悬浮在内容之上，背景透明或带有模糊材质，内容可以延伸到导航栏下方，形成真正的全面屏沉浸体验。

在《左右相册》中，这一效果通过 HarmonyOS UI Design Kit 提供的 HdsTabs 组件配合 barFloatingStyle 属性实现。

---

代码实现详解

1. 引入 HdsTabs

import { HdsNavDestination, HdsTabs, HdsTabsController } from '@kit.UIDesignKit';
import { hdsMaterial } from '@hms.hds.hdsMaterial';

HdsTabs 是 UI Design Kit 对系统 Tabs 组件的封装，原生支持悬浮样式、材质模糊等高级特性。

---

2. 基础结构：三个页签

HdsTabs({ controller: this.controller, index: this.currentIndex }) {
  TabContent() { PhotoListView() }
    .tabBar(new BottomTabBarStyle($r('app.media.ic_tab_photo'), '图片'));

  TabContent() { VideoListView({ isVisible: this.currentIndex === 1 }) }
    .tabBar(new BottomTabBarStyle($r('app.media.ic_tab_film'), '视频')
      .labelStyle({ unselectedColor: Color.White, selectedColor: $r('app.color.brand_primary') })
      .iconStyle({ unselectedColor: Color.White, selectedColor: $r('app.color.brand_primary') }));

  TabContent() { UserCenterView() }
    .tabBar(new BottomTabBarStyle($r('app.media.ic_tab_my'), '我的'));
}

每个 TabContent 通过 .tabBar() 绑定一个 BottomTabBarStyle，传入图标资源和文字标签。

---

3. 自定义图标与文字的选中/未选中颜色

这是视觉细节的关键所在。以"视频"页签为例：

.tabBar(new BottomTabBarStyle($r('app.media.ic_tab_film'), '视频')
  .labelStyle({
    unselectedColor: Color.White,          // 未选中时：白色文字
    selectedColor: $r('app.color.brand_primary')  // 选中时：品牌主色
  })
  .iconStyle({
    unselectedColor: Color.White,          // 未选中时：白色图标
    selectedColor: $r('app.color.brand_primary')  // 选中时：品牌主色
  })
)

为什么未选中用白色？

因为悬浮页签开启了 .barOverlap(true)，导航栏叠加在内容之上。内容区域（照片、视频）背景色深浅不一，白色图标和文字在深色内容上有最佳对比度，同时与悬浮的磨砂材质融为一体，不会显得突兀。

---

4. 开启悬浮样式：barFloatingStyle

.barOverlap(true)          // 导航栏叠加在内容上方，内容延伸至底部
.barPosition(BarPosition.End)
.barFloatingStyle({
  barWidth: {
    smallWidth: 200,       // 小屏宽度
    mediumWidth: 300,      // 中屏宽度
    largeWidth: 400        // 大屏/折叠屏宽度
  },
  barBottomMargin: 28,     // 距底部安全区的间距
  gradientMask: {
    maskColor: '#00F1F3F5', // 渐变遮罩颜色（透明）
    maskHeight: 90          // 遮罩高度，柔化内容与导航栏的边界
  },
  systemMaterialEffect: {
    materialType: hdsMaterial.MaterialType.IMMERSIVE,    // 沉浸式材质
    materialLevel: hdsMaterial.MaterialLevel.EXQUISITE   // 精致模糊等级
  }
})

各参数的作用：

参数	作用
barWidth	导航栏不再横贯全屏，而是根据屏幕尺寸自适应宽度，呈现"胶囊"形态
barBottomMargin	导航栏悬浮在底部安全区上方，留出呼吸感
gradientMask	在内容与导航栏之间添加渐变遮罩，过渡自然，避免硬切割
systemMaterialEffect	系统级磨砂模糊材质，导航栏背景随内容动态变化，质感细腻

---

5. 兼容旧版本的降级处理

barFloatingStyle 需要 API 版本 ≥ 60100（HarmonyOS NEXT）。代码中做了版本判断：

if (deviceInfo.distributionOSApiVersion >= 60100) {
  // 悬浮样式：白色未选中 + barFloatingStyle
} else {
  // 降级样式：灰色未选中 + 普通底部导航栏
}

旧版本回退到传统底部导航栏，图标和文字未选中色改为灰色，保证在非透明背景下的可读性。

---

视觉效果对比

	传统底部导航栏	悬浮页签（barFloatingStyle）
内容区域	被导航栏截断，无法延伸	延伸至屏幕底部，真全面屏
导航栏形态	横贯全屏的矩形条	自适应宽度的圆角胶囊
背景材质	纯色或固定模糊	随内容动态变化的系统级磨砂
图标/文字颜色	灰色（未选中）/ 主色（选中）	白色（未选中）/ 主色（选中）
整体观感	功能性导航	沉浸式、轻盈、有层次感

---

小结

悬浮页签看似只是一个导航栏样式的调整，实际上改变的是整个应用的空间感。内容不再被"框住"，而是自然地流向屏幕边缘；导航栏不再是一道墙，而是轻轻悬浮在内容之上的一枚胶囊。

对于《左右相册》这样以视觉内容为核心的应用，这种沉浸感尤为重要——当你全屏浏览一张照片或一段视频时，导航栏的存在感降到最低，注意力完全属于那段记忆本身。

这正是 HarmonyOS UI Design Kit 的价值所在：用一行 barFloatingStyle，让应用的质感上一个台阶。

再一次，欢迎下载体验——鸿蒙应用市场搜索“左右相册”或点击下载。