鸿蒙开发——组件阴影效果

1、概 述

ArkUI为组件提供了阴影效果设置。我们可以通过组件的.shadow属性为组件添加阴影效果。本文对阴影效果的设置做简单介绍。

2、接口介绍

对于普通组件来说，我们可以为其设置.shadow属性，定义如下：

 // 为组件添加阴影效果。
shadow(value: ShadowOptions | ShadowStyle)

其中，入参类型为ShadowOptions时，可以指定模糊半径、阴影的颜色、X轴和Y轴的偏移量。入参类型为ShadowStyle时，可指定不同阴影样式。

ShadowOptions含有的属性定义如下：

ShadowStyle是一个枚举，定义如下： 

OUTER_DEFAULT_XS  超小阴影。
OUTER_DEFAULT_SM  小阴影。
OUTER_DEFAULT_MD  中阴影。
OUTER_DEFAULT_LG  大阴影。
OUTER_FLOATING_SM  浮动小阴影。
OUTER_FLOATING_MD  浮动中阴影。

3、示 例

一个示例效果如下：

代码如下（16行代码）： 

@Entry
@Component
struct ShadowOptionDemo {
  build() {
    Row() {
      Column() {
        Column() {
          Text('shadowOption').fontSize(12)
        }
        .width(100)
        .aspectRatio(1)
        .margin(10)
        .justifyContent(FlexAlign.Center)
        .backgroundColor(Color.White)
        .borderRadius(20)
        .shadow({ radius: 10, color: Color.Gray })
        Column() {
          Text('shadowOption').fontSize(12)
        }
        .width(100)
        .aspectRatio(1)
        .margin(10)
        .justifyContent(FlexAlign.Center)
        .backgroundColor('#a8a888')
        .borderRadius(20)
        .shadow({ radius: 10, color: Color.Gray, offsetX: 20, offsetY: 20 })
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
    }
    .height('100%')
  }
}