HarmonyOS 鸿蒙Next中请问多色阴影如何实现

HarmonyOS 鸿蒙Next中请问多色阴影如何实现

cke_151.png

.shadow({
  radius: 50,           // 较大的模糊半径
  color: '#37B3FF',     // 使用渐变的结束色作为阴影色
  offsetX: 0.5,
  offsetY: 0.5            // 向下偏移，营造深度感
})

shadow 只能设置单个颜色


更多关于HarmonyOS 鸿蒙Next中请问多色阴影如何实现的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

直接让美工做个图不就行了。

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


在HarmonyOS鸿蒙Next中实现多色阴影，可使用ArkUI的Shadow组件。通过Shadow的color属性设置阴影颜色，radius控制模糊半径，offsetX/offsetY调整偏移量。例如：

// 单色阴影
.shadow({
  radius: 10,
  color: '#FF0000',
  offsetX: 5,
  offsetY: 5
})

// 多色阴影叠加
.shadow({
  radius: 8,
  color: '#00FF00',
  offsetX: -3
})
.shadow({
  radius: 12,
  color: '#0000FF',
  offsetY: 10
})

通过链式调用多个shadow()方法可实现多色阴影叠加效果。注意阴影层级顺序会影响显示效果。

在HarmonyOS Next中实现多色阴影效果，可以通过组合多个阴影样式或使用自定义绘制来实现。以下是两种实现方案：

  1. 叠加多个阴影效果： 通过为同一个组件设置多个阴影样式，使用不同的偏移量和颜色来模拟多色阴影效果。例如：
.container {
  .shadow({
    color: '#FF0000',
    radius: 10,
    offsetX: 2,
    offsetY: 2
  });
  .shadow({
    color: '#00FF00',
    radius: 10,
    offsetX: -2,
    offsetY: -2
  });
}
  1. 使用Canvas自定义绘制： 对于更复杂的多色阴影效果，可以使用Canvas的CustomPaint组件进行自定义绘制：
@Entry
@Component
struct MultiColorShadow {
  build() {
    Column() {
      Canvas(this.paintTask)
        .width(200)
        .height(200)
    }
  }

  paintTask(ctx: CanvasRenderingContext2D) {
    // 绘制第一个阴影
    ctx.shadowColor = '#FF0000';
    ctx.shadowBlur = 10;
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;
    
    // 绘制第二个阴影
    ctx.shadowColor = '#00FF00';
    ctx.shadowBlur = 10;
    ctx.shadowOffsetX = -5;
    ctx.shadowOffsetY = -5;
    
    // 绘制实际内容
    ctx.fillRect(50, 50, 100, 100);
  }
}

注意：阴影效果的性能消耗较大，建议合理控制阴影数量和模糊半径。

回到顶部