前面讲了 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
,可以把 RenderPhysicalShape 看作是 ClipPath 的加强版。