HarmonyOS鸿蒙Next中BlurStyle模块要如何正确导入

HarmonyOS鸿蒙Next中BlurStyle模块要如何正确导入 想模仿华为官方应用“我的华为”或“应用市场”中的底部光感玻璃风格的悬浮操作栏，跟着官方文档做出来后，发现悬浮操作栏的4个角已经是圆角了，但圆角下面还有一层还是方角，也挡住不能点下层的东西。
尝试用官方文档提到的一些API处理解决这个问题，但要导入一些相关的模块进，发现无法导入， 比如：BlurStyle，文档里说是从 ‘@kit.ArkUI’ 导入，但在DeveEco项目中写了import { BlurStyle } from ‘@kit.ArkUI’;提示找不到模块

3 回复

cke_211.png

BlurStyle是个枚举不需要导入，可以直接使用

更多关于HarmonyOS鸿蒙Next中BlurStyle模块要如何正确导入的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，BlurStyle位于@kit.ArkUI的common命名空间。正确导入方式为：

import { BlurStyle } from '@kit.ArkUI';

之后可直接使用BlurStyle.Normal等枚举值。无需额外声明，也无需引用其他模块。

BlurStyle 无需显式导入，它是 ArkUI 内置枚举，直接在组件上使用（如 .blur(BlurStyle.Thin) 或 .backgroundBlurStyle(BlurStyle.Thick)）即可。
若 IDE 提示找不到模块，可检查 DevEco Studio 是否为最新 API 版本。在 API 11+ 环境中，正确的导入语句应为 import { BlurStyle } from '@ohos.arkui.UIContext';，但实际开发中直接使用枚举值即可。

圆角下仍有方角的问题，常见原因是：模糊组件本身未裁剪或背景层未被圆角遮罩。解决方案：

  • 给同一个容器同时设置圆角和裁剪：
    Row() { /* 底部操作栏内容 */ }
  .width('100%')
  .height(60)
  .borderRadius(20)
  .clip(true)  // 关键：裁剪超出圆角的内容
  .backgroundBlurStyle(BlurStyle.Thick, {colorMode: ThemeColorMode.SYSTEM})
  .backgroundColor('#80FFFFFF')

下层点击穿透，可通过设置触摸测试行为解决：

  • 为模糊容器添加：.hitTestBehavior(HitTestMode.Transparent)，让触摸事件穿过透明区域到达下层。
  • 若需部分区域可点击，内部组件单独设置 .hitTestBehavior(HitTestMode.Block)。

这样即可实现与“我的华为”一致的圆角光感悬浮栏。

回到顶部