HarmonyOS 鸿蒙Next沉浸光感titlebar

HarmonyOS 鸿蒙Next沉浸光感titlebar 这种顶部的titlebar怎么扩展的呢？

![][https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtybbs/893/904/295/393CE927B221293EE7512161432F858B:50709E7ED57EAFC5C6CAF377C00961B2F67562595A7AB8783B646FF175E3D644.20260610120013.47223480301239367437757185777118:50001231000000:2800:A54BFD96EC589D2B887082D07A553B27DE0D55E20FB59B57C05A9794CAF73BF0.jpg]

![][https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtybbs/893/904/295/393CE927B221293EE7512161432F858B:50709E7ED57EAFC5C6CAF377C00961B2F67562595A7AB8783B646FF175E3D644.20260610120013.42595218739489948841447752883101:50001231000000:2800:B276759971D45A19B1DD59B966DC09EE3380A86CDA9D5F6078F7249F2EA3FF69.jpg]


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

11 回复

开发者您好，像您截图中的效果目前没有完全对应的组件，需要魔改沉浸光感悬浮页签。

图1需要封装多个自定义HdsTabs（每个包含一个tabBar），图2使用一个自定义HdsTabs（三个tabBar）。

关于如何修改可以参考我的这篇实战文章：

沉浸光感HDS底部页签：HdsTabs自定义tabBar解决方案

主要介绍了自定义底部页签的方法，可以任意修改内容，并且可以加入自定义事件，如长按事件。

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


学习了

这种顶部扩展一般不是去改系统标题栏，而是用 HdsNavigation 自带的标题栏自定义区域来做。stackBuilder 适合放在标题栏顶部叠加区域，比如胶囊按钮、搜索入口、自定义操作区；bottomBuilder 适合放标题栏底部扩展区，比如搜索框、Tab、筛选栏。内容区再用一个等高占位，避免首屏内容被标题栏盖住。

可以先按下面这个骨架改：

import { HdsNavigation, ScrollEffectType } from '@kit.UIDesignKit';
import { LengthMetrics } from '@kit.ArkUI';

const TITLE_BAR_HEIGHT_FREE: number = 138;
const BOTTOM_BUILDER_HEIGHT: number = 56;

@Entry
@Component
struct Index {
  private scroller: Scroller = new Scroller();
  @State blankHeight: number = TITLE_BAR_HEIGHT_FREE + BOTTOM_BUILDER_HEIGHT;

  @Builder
  StackBuilder() {
    Row() {
      Text('HdsNavigation')
        .fontSize(16)
        .fontWeight(FontWeight.Medium)
      Blank().layoutWeight(1)
      Button('操作')
        .height(36)
    }
    .width('100%')
    .height(56)
    .padding({ left: 16, right: 16 })
  }

  @Builder
  BottomBuilder() {
    Search({ placeholder: '搜索' })
      .width('100%')
      .height(40)
      .margin({ left: 16, right: 16 })
  }

  build() {
    HdsNavigation() {
      Scroll(this.scroller) {
        Column() {
          Blank().height(this.blankHeight)
          // 页面主体内容
        }
        .width('100%')
      }
      .scrollBar(BarState.Off)
    }
    .titleBar({
      style: {
        scrollEffectOpts: {
          enableScrollEffect: true,
          scrollEffectType: ScrollEffectType.GRADIENT_BLUR,
          blurEffectiveStartOffset: LengthMetrics.vp(0),
          blurEffectiveEndOffset: LengthMetrics.vp(20)
        },
        scrollEffectStyle: {
          backgroundStyle: { maskExtraHeight: 56 }
        }
      },
      content: {
        title: { mainTitle: '标题', subTitle: '副标题' },
        stackBuilder: (): void => this.StackBuilder(),
        bottomBuilder: { builder: (): void => this.BottomBuilder() }
      }
    })
    .bindToScrollable([this.scroller])
  }
}

几个点要注意：第一，blankHeight 要把标题栏本身高度和 bottomBuilder 高度一起算进去，否则视觉上会像内容顶到标题栏下面；第二，动态模糊/渐变效果建议绑定真实滚动容器，否则标题栏跟随滚动的状态不稳定；第三，如果只是加底部搜索栏，用 bottomBuilder 就够了，不要再套一层复杂弹窗。

参考： https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ui-design-hdsnavigation

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17，

好的，感谢您的分享，对我很有帮助，

你好，为什么我这样写之后对应的内容没有玻璃的效果是什么问题导致的呢？

开发者您好，修改上述代码后可以实现玻璃效果，修改后的代码如下所示：

// Index.ets
import {
  HdsNavigation,
  ScrollEffectType,
  hdsMaterial
} from '@kit.UIDesignKit';
import { LengthMetrics } from '@kit.ArkUI';

const TITLE_BAR_HEIGHT_FREE: number = 138; // 可删除
const BOTTOM_BUILDER_HEIGHT: number = 56; // 可删除

@Entry
@Component
struct Index {
  private scroller: Scroller = new Scroller();
  @State blankHeight: number = TITLE_BAR_HEIGHT_FREE + BOTTOM_BUILDER_HEIGHT; // 可删除

  @Builder
  StackBuilder() {
    Row() {
      Text('HdsNavigation')
        .fontSize(16)
        .fontWeight(FontWeight.Medium);
      Blank().layoutWeight(1);
      Button('操作')
        .height(36);
    }
    .width('100%')
    .height(56)
    .padding({ left: 16, right: 16 });
  }

  @Builder
  BottomBuilder() {
    Search({ placeholder: '搜索' })
      .width('100%')
      .height(40)
      .margin({ left: 16, right: 16 });
  }

  build() {
    HdsNavigation() {
      Scroll(this.scroller) {
        Column() {
          // 删除Blank().height(this.blankHeight)
          // 添加页面主体内容
          Image($r('app.media.scenery')).width('100%'); // scenery为自定义资源，开发者需替换本地资源
        }.width('100%')
      }
      .scrollBar(BarState.Off);
    }
    .titleBar({
      style: {
        scrollEffectOpts: {
          enableScrollEffect: true,
          scrollEffectType: ScrollEffectType.GRADIENT_BLUR,
          blurEffectiveStartOffset: LengthMetrics.vp(0),
          blurEffectiveEndOffset: LengthMetrics.vp(20)
        },
        scrollEffectStyle: {
          backgroundStyle: { maskExtraHeight: 56 }
        },
        // 添加设置沉浸光感效果：ADAPTIVE类型表示自适应系统材质，ADAPTIVE等级表示材质生效策略由系统根据设备性能自适应决定
        systemMaterialEffect: {
          materialType: hdsMaterial.MaterialType.ADAPTIVE,
          materialLevel: hdsMaterial.MaterialLevel.ADAPTIVE // 标题栏按钮沉浸光感效果跟随系统策略自适应
        },
      },
      content: {
        title: { mainTitle: '标题', subTitle: '副标题' },
        stackBuilder: (): void => this.StackBuilder(),
        bottomBuilder: { builder: (): void => this.BottomBuilder() }
      }
    })
    .bindToScrollable([this.scroller]);
  }
}

加油，

HdsNavigation 设置自定义区域

通过设置titleBar属性中的stackBuilder，bottomBuilder属性，可以使用标题栏的自定义区域设置能力。

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

在HarmonyOS Next中，实现沉浸光感titlebar可通过设置窗口全屏并调整系统栏样式（如window.setWindowLayoutFullScreen(true)），配合ArkUI的effect属性（如backdropBlur）实现毛玻璃效果。利用blendMode或linearGradient控制透光感，同时使用safeArea或expandSafeArea避开系统交互区域。

在HarmonyOS Next中实现“沉浸光感titlebar”即让标题栏扩展融入状态栏区域，核心是通过设置窗口为全屏布局模式，使应用内容可以绘制到状态栏下方，再将自定义的标题栏高度延伸到状态栏区域。

实现要点：

  1. 开启沉浸式窗口
    在WindowStage或Ability的onWindowStageCreate中调用window.setWindowLayoutFullScreen(true)，或通过setWindowSystemBarProperties隐藏/透明化状态栏，并启用内容避让属性的关闭。

  2. 自定义标题栏布局
    在页面最上层放置一个自定义的Column/Row组件，高度设为状态栏高度 + 标题内容高度。状态栏高度可通过window.getTopWindow().then(win => win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)).then(area => area.topRect.height)获取。

  3. 内容区域避让
    主内容区域需要根据状态栏和标题栏的总高度设置margin或padding，避免被遮挡。

最终效果是标题栏背景色向上延伸与状态栏融为一体，营造光感沉浸感。

回到顶部