HarmonyOS 鸿蒙Next中如何实现华为视频顶部tab栏这种沉浸光感的效果

HarmonyOS 鸿蒙Next中如何实现华为视频顶部tab栏这种沉浸光感的效果 cke_1029.jpeg

华为视频顶部tab栏这种怎么实现 给hdsTabs设置了barFloatingStyle 没有生效


更多关于HarmonyOS 鸿蒙Next中如何实现华为视频顶部tab栏这种沉浸光感的效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

hdsTabs改造的：

类HdsTabs样式—HdsButton实现，全面还原HdsTabs效果 | 华为开发者联盟

更多关于HarmonyOS 鸿蒙Next中如何实现华为视频顶部tab栏这种沉浸光感的效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


您好， 通过设置TitleBarStyleOptions的systemMaterialEffect参数，可为标题栏按钮设置沉浸光感视效。 通过设置HdsTabsFloatingStyle的systemMaterialEffect参数，可为底部页签设置沉浸光感视效。 具体您可以参考沉浸光感。

这个我没有在文档中找到，应该是用底层写的。，

你好顶部导航栏怎么实现沉浸光感呢，能分享一下吗？

图片

真不知道这促所谓的沉浸光感又或者叫液态玻璃是怎么搞上台面的。不但难看，而且还费电，关键是对视觉和交互就是一种灾难。用久了眼睛很疲劳。

不错

不错

用多个htstabs，定制样式，

在HarmonyOS Next中，可通过ArkUI实现沉浸光感Tab栏：

  • 使用windowStage.setWindowLayoutFullScreen(true)设置全屏布局，并设置状态栏透明。
  • Tab栏背景采用backgroundBlurStyle(BlurStyle.Thin)配合半透明颜色（如Color.White.alpha(0.3)）制造毛玻璃感。
  • 内容区域expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])延伸至状态栏下方，与Tab栏自然融合。

将 Tabs 的 barFloatingStyle 设为 true 只是第一步，沉浸光感效果还需配合沉浸式窗口和背景模糊。确保在 EntryAbility 中调用 window.setWindowLayoutFullScreen(true) 开启全屏沉浸，同时设置状态栏透明。TabBar 区域用 BlurBackground 或设置半透明背景色并叠加 BackdropBlur 实现背后内容的模糊透光，即可达到华为视频那种悬浮光感效果。若无效，检查父容器是否裁剪了溢出内容，以及 TabBar 是否被其他控件遮挡。

回到顶部