鸿蒙Next如何实现卡片阴影效果

在鸿蒙Next开发中，如何为卡片组件添加阴影效果？尝试过修改属性但效果不理想，能否提供具体的代码示例或实现步骤？官方文档中对阴影的配置说明比较简略，想知道是否有推荐的标准实现方式？

2 回复

鸿蒙Next实现卡片阴影？简单！用shadow属性，设置模糊半径、偏移和颜色，比如：

.shadow-card {
  shadow: 10px 10px 20px #888888;
}

一行代码，立体感拉满！记得搭配圆角更丝滑~

更多关于鸿蒙Next如何实现卡片阴影效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，可以通过以下方式实现卡片阴影效果：

方法一：使用系统阴影样式

@Component
struct CardWithShadow {
  build() {
    Column() {
      // 卡片内容
      Text('卡片内容')
        .fontSize(16)
        .fontColor(Color.Black)
    }
    .width('90%')
    .padding(20)
    .backgroundColor(Color.White)
    .borderRadius(16)
    .shadow({
      radius: 8,           // 阴影半径
      color: Color.Gray,   // 阴影颜色
      offsetX: 0,          // X轴偏移
      offsetY: 4           // Y轴偏移
    })
    .margin(10)
  }
}

方法二：自定义阴影参数

@Component
struct CustomShadowCard {
  build() {
    Column() {
      Text('自定义阴影卡片')
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
    }
    .width(200)
    .height(120)
    .padding(16)
    .backgroundColor(Color.White)
    .borderRadius(12)
    .shadow({
      radius: 12,
      color: '#00000020',  // 使用十六进制带透明度
      offsetX: 2,
      offsetY: 6
    })
  }
}

关键参数说明：

  • radius: 阴影模糊半径，值越大阴影越模糊
  • color: 阴影颜色，支持颜色常量或十六进制值
  • offsetX: 水平偏移，正数向右，负数向左
  • offsetY: 垂直偏移，正数向下，负数向上

使用技巧：

  1. 多层阴影：可以叠加多个阴影效果
  2. 透明度控制：使用带透明度的颜色实现柔和效果
  3. 响应式设计：结合媒体查询适配不同设备

这种方法简单高效，能够为卡片组件添加美观的阴影效果，提升界面层次感。

回到顶部