我们来尝试实现一个类似内阴影的效果

火柴就是我2026-02-12 13:59

实现效果:

关键代码：

js 复制代码

  @override
  void paint(Canvas canvas, Size size) {
    var rect = RRect.fromLTRBR(0, 0, size.width, size.height,Radius.circular(20));

    var topLeftShadowRect = rect.inflate(5).shift(Offset(-size.width/2 ,-size.height/2));

    var bottomRightShadowRect = rect.shift(Offset(size.width/2, size.height/2));
    var topLeftShadowPath = Path()..addRRect(topLeftShadowRect);
    var bottomRightShadowPath = Path()..addRRect(bottomRightShadowRect);

    var outShadowPath = Path()..addRRect(rect.deflate(20).shift(Offset(20, 20)));


    //这个就像是在右下角加了一个光源一样 换不同的颜色 效果也有点不一样
    var outerPainter = Paint()
      ..color = Colors.red
      ..maskFilter = MaskFilter.blur(BlurStyle.normal, 100);

    canvas.drawPath(outShadowPath, outerPainter);



    canvas.save();
    canvas.clipRRect(rect);
    var topLeftPaint = Paint()
      ..color = Colors.black.withAlpha(188)
      ..maskFilter = MaskFilter.blur(BlurStyle.normal, 60);

    canvas.drawPath(topLeftShadowPath, topLeftPaint);

    var bottomLeftPaint = Paint()
      ..color = Colors.white
      ..maskFilter = MaskFilter.blur(BlurStyle.normal, 60);
    canvas.drawPath(bottomRightShadowPath, bottomLeftPaint);


    canvas.restore();

  }

原理就是在左上角跟右下角分别放一个阴影，阴影中心就是左上角跟右下角,这样就会有一个从一个颜色到另一个颜色过渡的效果。

还有一个点就是在右下角我又加了一个比较小的矩形的阴影,模式normal，并且radius设置的特别大，就会有一个在右下角加了一个灯光的效果。