HarmonyOS 如何实现阴影效果？

Question

Answer 1

shadow属性设置组件的阴影，可以参考以下demo：

@Entry
@Component
struct ShadowOptionDemo {
  build() {
    Row() {
      Column() {
        Column() {
          Text('shadowOption').fontSize(12)
        }
        .width(200)
        .height(80)
        .margin(10)
        .justifyContent(FlexAlign.Center)
        .backgroundColor(Color.White)
        .borderRadius(10)
        .shadow({
          radius: 1,
          type: ShadowType.COLOR,
          color: Color.Gray,
          offsetY: 1,
          fill: true
        })
        Column() {
          Text('shadowOption').fontSize(12)
        }
        .width(200)
        .height(80)
        .margin(10)
        .justifyContent(FlexAlign.Center)
        .borderRadius(20)
        .shadow(ShadowStyle.OUTER_DEFAULT_XS)
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
    }
    .height('100%')
  }
}