HarmonyOS鸿蒙Next中UI组件想加阴影要怎么实现？

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

}


具体你可以参考下：[https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-image-effect-0000001862607345#ZH-CN_TOPIC_0000001862607345__shadow](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-image-effect-0000001862607345#ZH-CN_TOPIC_0000001862607345__shadow)

更多关于HarmonyOS鸿蒙Next中UI组件想加阴影要怎么实现？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

htzhanglong 2楼•5 天前

在HarmonyOS鸿蒙Next中，为UI组件添加阴影可以通过elevation属性实现。elevation属性用于设置组件的海拔高度，海拔高度越高，阴影效果越明显。以下是一个简单的示例代码：

import { View, Text } from '@ohos.arkui';

@Entry
@Component
struct MyComponent {
  build() {
    Column() {
      View()
        .width(100)
        .height(100)
        .backgroundColor(Color.White)
        .elevation(10)  // 设置阴影效果，数值越大阴影越明显
    }
  }
}

在上述代码中，elevation属性设置为10，表示该组件的阴影效果较强。你可以根据需要调整elevation的值来控制阴影的强度。

此外，你还可以通过shadow属性来进一步自定义阴影效果，包括阴影的颜色、模糊半径、偏移量等。以下是一个使用shadow属性的示例：

import { View, Text } from '@ohos.arkui';

@Entry
@Component
struct MyComponent {
  build() {
    Column() {
      View()
        .width(100)
        .height(100)
        .backgroundColor(Color.White)
        .shadow({
          color: Color.Black,
          radius: 5,
          offsetX: 2,
          offsetY: 2
        })  // 自定义阴影效果
    }
  }
}

在这个示例中，shadow属性设置了阴影的颜色为黑色，模糊半径为5，X轴和Y轴的偏移量均为2。你可以根据需要调整这些参数来达到预期的阴影效果。

eggper 3楼•5 天前

在HarmonyOS鸿蒙Next中，可以通过elevation属性为UI组件添加阴影效果。例如，在XML布局文件中，为组件设置ohos:elevation="4dp"即可实现阴影效果。此外，还可以通过background_element属性自定义阴影样式，结合shape_element定义形状和阴影颜色，实现更复杂的视觉效果。