HarmonyOS鸿蒙Next中如何设计出这种浮空有毛玻璃透明效果的tabs

HarmonyOS鸿蒙Next中如何设计出这种浮空有毛玻璃透明效果的tabs 怎么用代码写出这样的效果，问小艺也没有得到有效的结果 图片


更多关于HarmonyOS鸿蒙Next中如何设计出这种浮空有毛玻璃透明效果的tabs的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

参考这篇：https://developer.huawei.com/consumer/cn/forum/topic/0207203809524078041?fid=0109140870620153026&pid=0302203903307008302

更多关于HarmonyOS鸿蒙Next中如何设计出这种浮空有毛玻璃透明效果的tabs的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


API23以上对hdstabs有专门的属性可以直接实现
API22以下只能自己手搓，

还想问这样的怎么写

在HarmonyOS Next中，实现浮空毛玻璃透明效果的Tabs，主要使用ArkUI的组件和效果属性。通过@Styles或@Extend装饰器自定义Tab样式，结合backgroundBlurStyle属性设置背景模糊效果。使用opacity调整透明度，borderRadius和elevation实现圆角和悬浮阴影。布局上通常将Tabs置于Stack容器上层，确保浮动效果。具体代码涉及Tabs、TabContent及样式定义。

在HarmonyOS Next中，实现浮空、毛玻璃透明效果的Tabs，核心是结合<Tabs>组件、绝对定位以及背景模糊效果。这里提供关键代码思路和步骤。

1. 布局与定位

将Tabs容器设置为绝对定位（position: absolute），使其脱离文档流并悬浮在内容上方。通过z-index确保其位于合适层级。

// 示例结构
Stack() {
  // 你的主页面内容...
  Column() {
    // 悬浮Tabs容器
    Tabs() {
      TabContent() { /* ... */ }
      TabContent() { /* ... */ }
    }
    .position({ x: '0%', y: '80%' }) // 调整悬浮位置
    .width('100%')
    .height(60)
    .backgroundColor('#FFFFFF') // 基础背景色，配合透明度
    .backdropBlur(10) // 关键：背景模糊
    .opacity(0.9) // 透明度调整
    .borderRadius(20) // 圆角
  }
}

2. 毛玻璃效果

使用.backdropBlur()API实现背景模糊（毛玻璃效果），这是HarmonyOS Next提供的标准能力。通常需要配合半透明背景色（如.backgroundColor('rgba(255, 255, 255, 0.6)')）和透明度（.opacity()）来调整视觉效果。

3. 样式细化

  • 背景色：建议使用带透明度的颜色（如rgba(255, 255, 255, 0.7)），与.backdropBlur()搭配效果更佳。
  • 阴影：可添加.shadow()增强悬浮立体感。
  • 圆角：使用.borderRadius()让边角更柔和。

完整示例代码框架

@Entry
@Component
struct FloatingTabsExample {
  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      // 背景或其他页面内容
      Column() {
        // ... 你的页面主体内容
      }

      // 悬浮毛玻璃Tabs
      Column() {
        Tabs({ barPosition: BarPosition.End }) {
          TabContent() {
            Text('Tab 1').fontSize(16)
          }.tabBar('Tab1')

          TabContent() {
            Text('Tab 2').fontSize(16)
          }.tabBar('Tab2')
        }
        .barWidth(200) // 调整TabBar宽度
        .barHeight(50)
        .animationDuration(400)
      }
      .position({ x: '50%', y: '85%' })
      .margin({ left: -100 }) // 居中调整
      .width(200)
      .height(50)
      .backdropBlur(15)
      .backgroundColor('rgba(255, 255, 255, 0.75)')
      .opacity(0.95)
      .borderRadius(25)
      .shadow({ radius: 10, color: '#888', offsetX: 0, offsetY: 4 })
    }
    .width('100%')
    .height('100%')
  }
}

关键点

  • .backdropBlur()：核心API，数值越大越模糊。
  • 定位：使用Stack+position实现悬浮。
  • 颜色透明度：rgba或opacity调整透明程度。
  • 可根据实际UI需求调整模糊度、透明度、位置和尺寸参数。

直接在DevEco Studio中创建Tabs组件并应用上述样式即可快速实现。

回到顶部