【每日 widget】Flutter PhysicalModel

前面讲了 ClipRect 、ClipPath 、ClipOval 与 ClipRRect。本文学习 PhysicalModel，不仅可以剪裁，还能有阴影效果。

建议先看前面关于 clip 的三篇文章，因为 PhysicalModel 在 clip 的基础上增加了阴影功能。读完这三篇，再读这篇会非常轻松。从源码的位置上看 PhysicalModel 也是紧接着 clip 的。

源码分析

从文档上看，觉得很神秘，其实看看源码就知道了，不管是什么效果，最后都得用 canvas 画来出。

abstract class _RenderPhysicalModelBase<T> extends _RenderCustomClip<T> 

class RenderPhysicalModel extends _RenderPhysicalModelBase<RRect> 

从继承关系上也能看出 RenderPhysicalModel 是 clip widget 的近亲。

先看下构造函数，了解下参数。

 const PhysicalModel({
    super.key,
    this.shape = BoxShape.rectangle,
    this.clipBehavior = Clip.none,
    this.borderRadius,
    this.elevation = 0.0,
    required this.color,
    this.shadowColor = const Color(0xFF000000),
    super.child,
  }

再看下在实现上是如何使用这些参数的。

   if (elevation != 0.0 && paintShadows) {     
      canvas.drawRect(
        offsetBounds.inflate(20.0),
        _transparentPaint,
      );
      canvas.drawShadow(
        offsetRRectAsPath,
        shadowColor,
        elevation,
        color.alpha != 0xFF,
      );
    }
}

如果参数 elevation 不为 0 就会用到参数 shadowColor，调用 canvas.drawShadow 方法画阴影。

 final bool usesSaveLayer = clipBehavior == Clip.antiAliasWithSaveLayer;
 if (!usesSaveLayer) {
      canvas.drawPath(offsetPath, Paint()..color = color);
    }
    layer = context.pushClipPath(
      needsCompositing,
      offset,
      Offset.zero & size,
      _clip!,
      (PaintingContext context, Offset offset) {
        if (usesSaveLayer) {
          context.canvas.drawPaint(Paint()..color = color);
        }
        super.paint(context, offset);
     },

参数 color 用来做背景色，我们看到共有两处用到 color。 clipBehavior 为 Clip.antiAliasWithSaveLayer 的时候，只能用 context.canvas.drawPaint 方法。否则用 canvas.drawPath 方法，这也是 Clip.antiAliasWithSaveLayer 比较昂贵的原因。

switch (_shape) {
      case BoxShape.rectangle:
        return (borderRadius ?? rectangle.zero).toRRect(Offset.zero & size);
      case BoxShape.circle:
        final Rect rect = Offset.zero & size;
        return RRect.fromRectXY(rect, rect.width / 2, rect.height / 2);
}

当参数 shape 为 rectangle 的时候，参数 borderRadius 决定矩形的圆角大小。 shape 只能有两种，一种是 BoxShape.rectangle，一种是 BoxShape.rectangle。 但从实现上看，其实就是一种，都是 RRect（圆角矩形）。

 layer = context.pushClipRRect(
 ...

clip 效果用的是 pushClipRRect， 和 ClipRect 用的的方法是一样的。flutter 看似有很多 widget，但核心却不多。

知道了每个参数的作用，就不会迷惑了，下面看下这些参数会产生什么样的效果。

使用 PhysicalModel

从代码上可以看出 PhysicalModel 一共两个能力，一个是阴影效果，一个是裁剪。我们就一起用上。

PhysicalModel(
   color: Colors.white,
   elevation: 10,
   shadowColor: Colors.black,
   clipBehavior: Clip.hardEdge,
   shape: BoxShape.circle,
   child:  SizedBox(width: 100,height: 100),
)

child 不能为空，否则什么也不会绘制

到这里就是全部了，挺简单的。 唯一的问题就是 elevation 无法和设计师的阴影参数对应上。如果用这个widget ，只能靠感觉调 elevation 的值了。

知识都是有联系的，寻着 clip 一族找到这里，就会非常自然。可以把 PhysicalModel 看作是 ClipRRect widget 的加强版，

PhysicalModel 只能 clip 矩形和圆形，可能你会觉得有所不足，RenderPhysicalShape 可以解决这个问题。

看下它的构造函数

 PhysicalShape({
    super.key,
    required this.clipper,
    this.clipBehavior = Clip.none,
    this.elevation = 0.0,
    required this.color,
    this.shadowColor = const Color(0xFF000000),
    super.child,
  }

我们发现多了一个 clipper 参数，类型是 CustomClipper<Path>，可以把 RenderPhysicalShape 看作是 ClipPath 的加强版。