HarmonyOS 鸿蒙Next中请问华为音乐沉浸式导航效果是怎么做到的

HarmonyOS 鸿蒙Next中请问华为音乐沉浸式导航效果是怎么做到的

最外层我用的是 Navigation 组件，里面套了 List 组件渲染列表。想要达到的效果有三个：

  1. 列表上部区域需要沉浸式展示
  2. 向下滚动列表的时候，顶部导航背景色逐渐显现
  3. “播放全部”标题需要有吸顶效果

我的第一想法就是隐藏 Navigation 原本的标题栏，用自定义组件实现，也确实能达到前面两个需求。但是由于 Navigation 自身的标题栏被隐藏了，播放全部无法做到吸顶效果了；反过来如果用 Navigation 自带的标题栏，那么沉浸式效果就做不到了（看下图内容区固定在标题栏下面，无法延伸到标题栏吧？）。不知道有没有什么办法能兼顾这三点需求呢？

50_1748487678.gif

cke_6271.png


更多关于HarmonyOS 鸿蒙Next中请问华为音乐沉浸式导航效果是怎么做到的的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复
  1. 沉浸式参考
onWindowStageCreate(windowStage: window.WindowStage): void {
  // Main window is created, set main page for this ability
  hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

  windowStage.loadContent('pages/TranslatePage', (err) => {
    if (err.code) {
      hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
      return;
    }
    hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');
  });
  windowStage.getMainWindow((err,data) =>{
    if (!err.code) {
      data.setWindowLayoutFullScreen(true) //开启沉浸式
      // 获取安全区域高度 并存储到应用中
      const topArea = data.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
      AppStorage.setOrCreate('topHeight', px2vp(topArea.topRect.height))
      const bottomArea = data.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)
      AppStorage.setOrCreate('bottomHeight', px2vp(bottomArea.bottomRect.height))
    }
  })
}

不需要沉浸式的地方用安全高度

@Entry
@Component
struct TranslatePage {
  @StorageProp('topHeight') topHeight: number = 0
  @StorageProp('bottomHeight') bottomHeight: number = 0

  build() {
    RelativeContainer()
    .height('100%')
    .width('100%')
    .margin({ bottom: this.bottomHeight })
  }
}

  1. 下滑的时候你可以监听下滑的长度，到达一定数值，用opacity配合动画实现渐显的效果

  2. 吸顶参考：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-common-list-flows#section103354617711

更多关于HarmonyOS 鸿蒙Next中请问华为音乐沉浸式导航效果是怎么做到的的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


吸顶方案确实可行，感谢，

鸿蒙Next中华为音乐的沉浸式导航效果主要通过以下技术实现：

  1. 使用ArkUI的Navigation组件构建导航框架
  2. 运用共享元素转场动画(SharedElementTransition)实现平滑过渡
  3. 结合自定义路由动画(CustomRouteTransition)处理页面切换
  4. 利用UI动效引擎实现高帧率渲染
  5. 通过PageTransitionEffect设置页面进出效果

具体实现依赖鸿蒙的分布式动效框架和声明式UI开发范式，完全基于ArkTS语言开发，未使用Java或C语言技术栈。

在HarmonyOS Next中实现类似华为音乐的沉浸式导航效果，可以通过以下方案解决：

  1. 使用Navigation+Column布局结构：
Navigation() {
  Column() {
    // 自定义沉浸式头部区域
    Image($r('app.media.banner'))
      .width('100%')
      .height(200)

    // 播放全部吸顶组件
    Text('播放全部')
      .position({ y: $scrollY }) // 绑定滚动位置
      .zIndex(1)

    // 列表内容
    List() {...}
  }
}
  1. 关键实现点：
  • 通过position和zIndex控制"播放全部"的悬浮效果
  • 监听滚动事件动态调整导航栏透明度：
@State navAlpha: number = 0

Scroll(scroller: Scroller) {
  scroller.onScroll((yOffset: number) => {
    this.navAlpha = yOffset > 50 ? 1 : yOffset / 50
  })
}
  1. 导航栏样式动态绑定：
.navigationTitle('', { 
  backgroundColor: `rgba(255,255,255,${this.navAlpha})`
})

这种方案既保留了原生Navigation的标题栏功能，又通过动态样式和布局控制实现了沉浸式效果与吸顶功能的完美结合。

回到顶部