HarmonyOS鸿蒙Next的ArkTS开发中，如何给Column、Stack等可视化组件添加阴影效果？

HarmonyOS鸿蒙Next的ArkTS开发中，如何给Column、Stack等可视化组件添加阴影效果？ 给 Column、Stack 等 ArkTS 可视化组件添加阴影，本质是为了解决移动端界面 “平面化” 问题，通过模拟现实世界的光影效果，强化组件的视觉层级、引导用户交互、贴合用户的视觉认知习惯，最终提升 App 的整体质感和使用体验，这也是 HarmonyOS 官方设计规范中推荐的 UI 优化手段。
请问如何添加阴影？

3 回复

ArkTS 为所有可视化组件提供了shadow系列通用属性，只需配置阴影的颜色、模糊半径、偏移量 三个核心参数，就能模拟出符合现实光影逻辑的阴影效果，适配 Column、Stack、Row 等所有容器组件。

// xxx.ets
@Entry
@Component
struct UseShadowBatchingExample {
  build() {
    Column() {
      Column({ space: 10 }) {
        Stack() {

        }
        .width('90%')
        .height(50)
        .margin({ top: 5 })
        .backgroundColor(0xFFE4C4)
        .shadow({
          radius: 120,
          color: Color.Green,
          offsetX: 0,
          offsetY: 0
        })
        .align(Alignment.TopStart)
        .shadow({
          radius: 120,
          color: Color.Green,
          offsetX: 0,
          offsetY: 0
        })

        Stack() {

        }
        .width('90%')
        .height(50)
        .margin({ top: 5 })
        .backgroundColor(0xFFE4C4)
        .align(Alignment.TopStart)
        .shadow({
          radius: 120,
          color: Color.Red,
          offsetX: 0,
          offsetY: 0
        })
        .width('90%')
        .backgroundColor(Color.White)

        Column() {
          Text()
            .fontWeight(FontWeight.Bold)
            .fontSize(20)
            .fontColor(Color.White)
        }
        .justifyContent(FlexAlign.Center)
        .width(150)
        .height(150)
        .borderRadius(10)
        .backgroundColor(0xf56c6c)
        .shadow({
          radius: 300,
          color: Color.Yellow,
          offsetX: 0,
          offsetY: 0
        })

        Column() {
          Text()
            .fontWeight(FontWeight.Bold)
            .fontSize(20)
            .fontColor(Color.White)
        }
        .justifyContent(FlexAlign.Center)
        .width(150)
        .height(150)
        .backgroundColor(0x67C23A)
        .borderRadius(10)
        .translate({ y: -50 })
        .shadow({
          radius: 220,
          color: Color.Blue,
          offsetX: 0,
          offsetY: 0
        })
      }
      .useShadowBatching(true)
    }
    .width('100%').margin({ top: 5 })
  }
}

更多关于HarmonyOS鸿蒙Next的ArkTS开发中，如何给Column、Stack等可视化组件添加阴影效果？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在ArkTS中，给Column、Stack等组件添加阴影效果，可以使用组件的shadow属性。该属性接收一个ShadowStyle对象，用于定义阴影的颜色、半径、偏移量等参数。例如，设置shadow: { radius: 10, color: Color.Black, offsetX: 5, offsetY: 5 }。

在ArkTS中，为Column、Stack等组件添加阴影效果，主要通过组件的通用属性 shadow 来实现。该属性可以方便地控制阴影的颜色、半径、偏移量和模糊度。

核心方法：使用 shadow 属性

shadow 属性接收一个 ShadowOptions 对象，其核心参数如下：

  • radius：阴影模糊半径（必需）。值越大，阴影越模糊、越柔和。
  • color：阴影颜色。默认为黑色。
  • offsetX / offsetY：阴影在X轴和Y轴上的偏移量。用于控制阴影的方向和长度。

基础示例代码：

// 为Column添加一个基础阴影
Column() {
  // 组件内容...
}
.width('90%')
.height(100)
.backgroundColor(Color.White)
.borderRadius(16)
.shadow({
  radius: 20,        // 模糊半径
  color: Color.Gray, // 阴影颜色
  offsetX: 5,        // X轴偏移
  offsetY: 5         // Y轴偏移
})

// 为Stack添加一个更柔和的底部阴影
Stack() {
  // 组件内容...
}
.width(200)
.height(200)
.backgroundColor('#F0F0F0')
.borderRadius(20)
.shadow({
  radius: 35,
  color: '#40000000', // 使用带透明度的颜色（ARGB格式）
  offsetX: 0,
  offsetY: 10         // 主要向下偏移，模拟顶部光源
})

关键实践建议：

  1. 颜色与透明度：通常使用半透明的灰色或黑色（如 '#20000000'）来获得更自然的阴影效果，避免阴影过于生硬。
  2. 与圆角配合：为设置了 borderRadius 的组件添加阴影时，阴影形状会自动匹配圆角。
  3. 性能考量：过度使用大面积或复杂阴影可能对渲染性能有细微影响。在列表等需要高性能滚动的场景中，应保持阴影简洁。
  4. 设计一致性：参考HarmonyOS设计系统的 Shadow 样式规范，在应用中保持阴影的半径、偏移量的一致，以建立统一的视觉层级。

通过调整 radius、offset 和 color 这三个参数，你可以灵活地创建出从细微的深度提示到强烈的悬浮效果等各种阴影样式，有效解决界面“平面化”问题，提升视觉层次感和质感。

回到顶部