HarmonyOS鸿蒙Next沉浸光感顶部按钮效果

HarmonyOS鸿蒙Next沉浸光感顶部按钮效果 顶部沉浸光感的效果要怎么做呢？
我做出来的效果一般，不能达到这种效果，官方的沉浸光感底部已经实现



更多关于HarmonyOS鸿蒙Next沉浸光感顶部按钮效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

这里有个第三方库：

https://ohpm.openharmony.cn/#/cn/detail/hds_button

可以帮你实现光感按钮效果。

原理是魔改的HdsTabs。

更多关于HarmonyOS鸿蒙Next沉浸光感顶部按钮效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这个目前没有现成的组件，需要魔改HdsTabs，也就是你说的“沉浸光感底部”，加多个“沉浸光感底部”组合而成。

好的我试试，

刚好可以看看：【开发者实践】HarmonyOS 6.1.0 创新特性“悬浮页签+沉浸光感”精品文章专题

https://developer.huawei.com/consumer/cn/forum/topic/0203212953843950072?fid=0109140870620153026&ha_source=znx

里面几个案例都不错

  • 基于 HdsTabs + barFloatingStyle 实现浮动按钮

可以尝试通过添加Hds Tabs组件来进行功能实现，

开发者您好，预计【26年9月下旬到10月上旬】交付，版本发布时间以官网为准。

在HarmonyOS NEXT中实现沉浸光感顶部按钮效果，可使用ArkUI的window.setWindowLayoutFullScreen(true)设置全屏沉浸，通过@ohos.window监听状态栏高度并自定义Column组件适配安全区。光感效果借助backdropFilter属性设置背景模糊，或通过LinearGradient与@State动态改变透明度实现。按钮交互使用@Gesture处理点击事件。避免使用Java/C层。

实现顶部沉浸光感效果的核心是状态栏透明 + 顶部径向渐变光晕。
在HarmonyOS Next中，先通过 window.setWindowLayoutFullScreen(true) 和设置状态栏透明 (statusBarColor 设为透明)，使内容延伸到状态栏区域。
顶部按钮区域使用 Stack 组件，背景添加一个从中心向外扩散的径向渐变（中心亮色、边缘透明），模拟光感扩散；再配合适量 blendMode 或 opacity 让按钮与背景自然融合。
若效果仍不够通透，可在顶部区域下方叠加一层 Blur（系统模糊）组件，增强玻璃质感光效。注意使用 expandSafeArea 处理顶部安全区域，避免按钮被遮挡。

回到顶部