HarmonyOS鸿蒙Next中hdsTabs如何实现透明

HarmonyOS鸿蒙Next中hdsTabs如何实现透明 应用市场的这个hdsTabs 是如何实现透明度的

cke_454.jpeg


更多关于HarmonyOS鸿蒙Next中hdsTabs如何实现透明的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

除了应用开发支持HsdTabs沉浸光感，还需要在系统设置开启金沉浸光感为“强”（在系统设置顶部搜索框搜索“沉浸光感”即可找到），不同型号设备支持情况不一样，一般搭载麒麟9020及以上CPU机型支持。

更多关于HarmonyOS鸿蒙Next中hdsTabs如何实现透明的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


应用实现沉浸光感的官方文档可以看这个：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-hds-component-material

你好，可以参考我的这篇实战文章，沉浸光感开发保姆级教程：
https://developer.huawei.com/consumer/cn/blog/topic/03214613570575010

开发者你好，可以参考沉浸光感实现：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-hds-component-material

默认情况下就是有点透明的，也可以设置透明度：

.barFloatingStyle({
      //...
      barOpacity: 0.5,
})

文档：HdsTabs-ArkTS组件-UI Design Kit（UI设计套件）

这个是沉浸光感，最弱等级的，

开发者你好，我也是，最近自己的APP适配了官方应用，同样的沉浸光感导航栏，所以希望可以帮到你。

简单来说，实现这个效果是使用了官方的HDSTABS+悬浮样式。不需要人为去控制透明度，直接使用这两项官方能力即可。

在 hdsTabs 组件上设置 .backgroundColor(Color.Transparent) 可使背景透明。若需 TabBar 区域也透明，对 TabBar 节点设置相同属性。若需整体完全透明（包括内容），使用 .opacity(0)。

在 HarmonyOS Next 中，hdsTabs 组件要实现透明效果，直接设置其标签栏背景为透明即可。关键属性为 tabBarBackgroundColor，将其赋值为 Color.Transparent。若有分割线，可通过 tabBarDividerColor 也设为透明或隐藏。

hdsTabs({
  tabs: this.tabList,
  barOptions: {
    tabBarBackgroundColor: Color.Transparent, // 透明背景
    tabBarDividerColor: Color.Transparent     // 透明分割线
  },
  ...
})
回到顶部