鸿蒙Next中shadow功能如何使用

在鸿蒙Next中，shadow功能具体怎么使用？能否提供一个简单的示例代码？我在开发中遇到了阴影效果不生效的问题，不知道是不是参数设置不对。另外，shadow支持的属性有哪些，比如模糊半径、偏移量等该如何配置？希望有经验的朋友能分享一下具体用法和常见问题的解决方法。

2 回复

鸿蒙Next的Shadow功能？简单说就是给组件加“影分身”！在Component的shadow属性里设置模糊半径、偏移量和颜色，比如：

.shadow({
  radius: 10,
  offsetX: 5,
  offsetY: 5,
  color: '#000000'
})

瞬间让UI立体起来，告别扁平化！记得别把阴影玩成“黑眼圈”效果就行😄

更多关于鸿蒙Next中shadow功能如何使用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，Shadow功能用于为组件添加阴影效果，增强UI的立体感。以下是基本使用方法：

1. 基本语法

使用 shadow 属性为组件设置阴影，参数包括：

  • radius：阴影模糊半径（数值）
  • color：阴影颜色（Color类型）
  • offsetX 和 offsetY：阴影偏移量（数值，控制阴影方向）

2. 代码示例

import { ShadowOptions } from '@ohos/arkui.advanced.CanvasComponent';

// 在组件中应用阴影
@Component
struct ShadowExample {
  build() {
    Column() {
      // 为矩形添加阴影
      Rectangle()
        .width(100)
        .height(100)
        .fill(Color.White)
        .shadow({
          radius: 10,
          color: Color.Gray,
          offsetX: 5,
          offsetY: 5
        })
    }
    .padding(20)
  }
}

3. 关键参数说明

  • radius：值越大阴影越模糊（建议范围 1-50）。
  • offsetX/Y：正值为右下阴影，负值为左上阴影。
  • color：支持透明度（如 Color.Gray 或 '#80000000'）。

4. 注意事项

  • 阴影性能与半径值正相关，避免过大值。
  • 部分组件（如Text）需结合背景使用阴影。
  • 可通过动画动态修改阴影属性实现交互效果。

通过调整参数可快速实现卡片、浮层等常见设计效果。

回到顶部