1、概 述
ArkUI为组件提供了阴影效果的设置。我们可以通过组件的.shadow属性为组件添加阴影效果。本文对阴影效果的设置做简单介绍。
2、接口介绍
对于普通组件来说，我们可以为其设置.shadow属性，定义如下：
// 为组件添加阴影效果。
shadow(value: ShadowOptions | ShadowStyle)
其中，入参类型为ShadowOptions时，可以指定模糊半径、阴影的颜色、X轴和Y轴的偏移量。入参类型为ShadowStyle时，可指定不同阴影样式。
ShadowOptions含有的属性定义如下：
| 属性名 | 类型 | 说明 |
| radius | number | Resource | 阴影模糊半径。取值范围：[0, +∞)单位：px。 说明：设置小于0的值时，按值为0处理。如需使用vp单位的数值可用vp2px进行转换。如果radius为Resource类型，则传入的值需为number类型。元服务API：从API version 11开始，该接口支持在元服务中使用。 |
| type | ShadowType | 阴影类型。默认为COLOR。 |
| color | Color | string | Resource| ColoringStrategy | 阴影的颜色。默认为黑色。 说明：从API version 11开始，该接口支持使用ColoringStrategy实现智能取色，智能取色功能不支持在ArkTS卡片、textShadow中使用。当前仅支持平均取色和主色取色，智能取色区域为shadow绘制区域。支持使用'average'字符串触发智能平均取色模式，支持使用'primary'字符串触发智能主色模式。 |
| offsetX | number | Resource | 阴影的X轴偏移量。默认值：0单位：px。 说明：如需使用vp单位的数值可用vp2px进行转换。如果offsetX为Resource类型，则传入的值需为number类型。 |
| offsetY | number | Resource | 阴影的Y轴偏移量。默认值：0单位：px说明：如需使用vp单位的数值可用vp2px进行转换。如果offsetY为Resource类型，则传入的值需为number类型。 |
| fill11+ | boolean | 阴影是否内部填充。默认为false。说明：textShadow中该字段不生效。 |
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%')
}
}
