鸿蒙5.0开发进阶：UI框架动画效果（阴影）

懂你的大海

于 2024-09-27 15:22:24 发布

阅读量79

点赞数 1

分类专栏： ArkUI 鸿蒙开发文章标签： harmonyos 华为 android 鸿蒙 ArkUI ArkTS

本文链接：https://blog.csdn.net/Androidbye/article/details/142594563

版权

鸿蒙开发同时被 2 个专栏收录

131 篇文章 2 订阅

订阅专栏

ArkUI

59 篇文章 0 订阅

订阅专栏

阴影

阴影接口shadow可以为当前组件添加阴影效果，该接口支持两种类型参数，开发者可配置ShadowOptions自定义阴影效果。ShadowOptions模式下，当radius = 0 或者 color 的透明度为0时，无阴影效果。

@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%')
  }
}