HarmonyOS鸿蒙Next中目前沉浸光感是只有HDS组件才能用吗,其他组件,比如search组件我没看到与沉浸光感相关的用法;目前怎么实现

HarmonyOS鸿蒙Next中目前沉浸光感是只有HDS组件才能用吗,其他组件,比如search组件我没看到与沉浸光感相关的用法;目前怎么实现 【问题描述】:目前沉浸光感是只有HDS组件才能用吗,其他组件,比如search组件我没看到与沉浸光感相关的用法;目前怎么实现

【问题现象】:功能需求

【版本信息】:开发工具版本:6.1.0(23) 、Api语言版本:23

8 回复

开发者您好,当前支持HDS组件的沉浸光感材质能力,如果您期望Search组件实现沉浸光感效果,您方便的话,麻烦您补充以下信息:

请问您是在什么样的业务场景中使用该能力,交互流程是怎样的,当前Search组件无法实现沉浸光感,方便说明能力不满足可能带来的影响:什么时间用到?是否高频?有无三方库可以做到?若提供该能力,是否会造成大工作量返工?请您注意提供的内容不要包含您或第三方的非公开信息,如给您带来不便,敬请谅解。

更多关于HarmonyOS鸿蒙Next中目前沉浸光感是只有HDS组件才能用吗,其他组件,比如search组件我没看到与沉浸光感相关的用法;目前怎么实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


沉浸光感后续会开放给更多组件吗?我看6.1官网在介绍这个给的图片里除了页签栏还有其他的

开发者您好,后续已有更多组件在规划中,还请关注后续版本,感谢您的理解与支持。

您好,相关组件暂不支持

我这边也在跟进

目前沉浸光感官方只适配了HdsTabs和HdsNavigation等HDS组件,其他普通组件的沉浸光感效果官方还在开发中。

HarmonyOS 5 / 6 (API 23) 中,官方的沉浸光感(系统级毛玻璃、动态模糊、光影跟随)确实只有 HDS 组件支持原生 Search 组件、普通 ArkUI 组件没有内置接口Huawei Developer。

一、为什么只有 HDS 组件才有

  • 沉浸光感 = 系统级材质效果(半透 + 模糊 + 动态光影 + 系统开关联动)Huawei Developer
  • UI Design Kit (HDS) 封装,开放给:
    • HdsTabs(底部页签)
    • HdsNavigation / HdsTitleBar(标题栏)
    • 部分 HDS 容器组件
  • 普通 Search / TextInput / Button 等:无内置光感属性Huawei Developer

二、给 Search 加 “类沉浸光感”(3 种方案)

方案 1:最推荐 → 用 HdsSearch(如果有)

如果你的 DevEco Studio 版本支持 HdsSearch(HDS 搜索组件):

在 HarmonyOS 5 / 6 (API 23) 中,官方的沉浸光感(系统级毛玻璃、动态模糊、光影跟随)确实只有 HDS 组件支持。原生 Search 组件、普通 ArkUI 组件没有内置接口Huawei Developer。
一、为什么只有 HDS 组件才有
沉浸光感 = 系统级材质效果(半透 + 模糊 + 动态光影 + 系统开关联动)Huawei Developer
由 UI Design Kit (HDS) 封装,开放给:
HdsTabs(底部页签)
HdsNavigation / HdsTitleBar(标题栏)
部分 HDS 容器组件
普通 Search / TextInput / Button 等:无内置光感属性Huawei Developer
二、给 Search 加 “类沉浸光感”(3 种方案)
方案 1:最推荐 → 用 HdsSearch(如果有)
如果你的 DevEco Studio 版本支持 HdsSearch(HDS 搜索组件):
  • 优点:官方、自动跟系统联动、有动态模糊、滑动变化Huawei Developer
  • 要求:必须引入 @kit.UIDesignKit

方案 2:无 HdsSearch → 自定义模拟(最通用)

backdropBlur+backgroundColor(透明度) 手动做 “伪沉浸光感”:

@Entry
@Component
struct CustomSearch {
  build() {
    Column() {
      // 外层容器做模糊+半透(模拟光感背景)
      Row()
        .width('90%')
        .height(48)
        .backgroundColor($r('sys.color.ohos_id_color_backdrop'))
        .backdropBlur(15) // 背景模糊(核心)
        .borderRadius(24)
        .padding({ left: 16, right: 16 })
        .alignItems(VerticalAlign.Center)
      {
        // 内层 Search / TextInput
        TextInput({ placeholder: '搜索' })
          .width('100%')
          .backgroundColor(Color.Transparent)
          .fontColor($r('sys.color.ohos_id_color_text_primary'))
      }
      .margin(10)
    }
    .width('100%')
    .padding(10)
  }
}
  • 效果:静态半透 + 模糊,接近视觉
  • 缺点:没有系统联动、没有动态光影、滑动不变Huawei Developer

方案 3:高阶 → 包裹在 HDS 光感容器内

把普通 Search 放进 HdsNavigation/HdsTabs 光感区域 间接生效:

import { HdsNavigation, NavigationBarStyle } from '@kit.UIDesignKit';

@Entry
@Component
struct PageWithSearch {
  build() {
    // HDS导航(自带沉浸光感栏)
    HdsNavigation({
      title: '首页',
      barStyle: NavigationBarStyle.Floating
    }) {
      Column() {
        // 普通Search(会继承上层部分光感/透明度)
        Search({ placeholder: '搜索' })
          .width('90%')
          .margin(10)
          .backgroundColor(Color.Transparent)
      }
    }
    // 开启标题栏沉浸光感
    .systemMaterialEffect(true)
  }
}
  • 优点:沾系统光感、联动系统开关Huawei Developer
  • 缺点:必须套 HDS 页面结构

三、API 23 关键接口(HDS 专属)

  • 开启沉浸光感:
.systemMaterialEffect(true) // 仅HDS组件有
  • 对应文档:

    6.1.0(23) 开始,HDS 组件支持 systemMaterialEffect 参数。

  • 要真・系统沉浸光感

    • 必须用 HDS 组件HdsSearch/HdsNavigation
    • .systemMaterialEffect(true)
  • 普通 Search 只能模拟

    • backdropBlur(15) + 半透背景
    • 视觉接近,但无动态 / 系统联动Huawei Developer
  • 未来

    • HarmonyOS 后续版本可能开放通用光感接口,但目前仅限 HDS
  • 四、总结(直接照抄)

沉浸光感目前仅HDS组件直接支持。其他组件如Search无对应API。可通过设置window属性setWindowBlur()或组件blurshadow等通用属性模拟效果。,

沉浸光感并非 HDS 组件特有,任何组件(包括 Search)均可实现。它本质是窗口沉浸式能力,需通过窗口 API 配置状态栏及导航栏透明,然后调整组件布局避让或覆盖系统栏区域。

核心步骤:

  1. onWindowStageCreate 中获取主窗口,调用 setWindowSystemBarProperties 设置状态栏、导航栏透明。
  2. 在页面布局中,为需要沉浸的组件设置安全区域避让或使用 expandSafeArea 让其延伸到状态栏后方。
  3. Search 组件本身无直接沉浸属性,但你可以将其放入一个设置好避让或扩展的容器内,即可呈现沉浸光感。

示例代码片段:

// EntryAbility.ts (部分)
onWindowStageCreate(windowStage: window.WindowStage) {
  windowStage.getMainWindow().then(win => {
    win.setWindowSystemBarProperties({
      statusBarColor: '#00FFFFFF', // 透明
      navigationBarColor: '#00FFFFFF',
      // 让内容延伸到系统栏下方
      statusBarContentColor: '#000000',
    });
  });
}

// 页面
build() {
  Column() {
    Search().width('100%').height(56)
      .margin({ top: 20 }) // 手动避让状态栏高度
    // 其余内容
  }
  .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
  .backgroundColor('#FF6200EE')
}

注意:需在真机或模拟器上验证效果,因为预览器不一定完整支持系统栏透明。

回到顶部