Flutter 如何优化SingleChildRenderObjectWidget以重复使用？

所以我在寻找一种创建内部阴影的方法，并找到了这段代码

这正是我需要的外观，但我有多达40个小部件包装与此在同一时间有一个巨大的性能成本。（释放模式下为10 fps）

这是理想的外观：

所以我的问题是：有没有可能让它像普通的BoxShadow一样高效

class InnerShadow extends SingleChildRenderObjectWidget {
  const InnerShadow({
    Key key,
    this.shadows = const <Shadow>[],
    Widget child,
  }) : super(key: key, child: child);

  final List<Shadow> shadows;

  @override
  RenderObject createRenderObject(BuildContext context) {
    final renderObject = _RenderInnerShadow();
    updateRenderObject(context, renderObject);
    return renderObject;
  }

  @override
  void updateRenderObject(
      BuildContext context, _RenderInnerShadow renderObject) {
    renderObject.shadows = shadows;
  }
}

class _RenderInnerShadow extends RenderProxyBox {
  List<Shadow> shadows;

  @override
  void paint(PaintingContext context, Offset offset) {
    if (child == null) return;
    final bounds = offset & size;

    context.canvas.saveLayer(bounds, Paint());
    context.paintChild(child, offset);

    for (final shadow in shadows) {
      final shadowRect = bounds.inflate(shadow.blurSigma);
      final shadowPaint = Paint()
        ..blendMode = BlendMode.srcATop
        ..colorFilter = ColorFilter.mode(shadow.color, BlendMode.srcOut)
        ..imageFilter = ImageFilter.blur(
            sigmaX: shadow.blurSigma, sigmaY: shadow.blurSigma);
      context.canvas
        ..saveLayer(shadowRect, shadowPaint)
        ..translate(shadow.offset.dx, shadow.offset.dy);
      context.paintChild(child, offset);
      context.canvas.restore();
    }

    context.canvas.restore();
  }
}

class InnerShadow扩展了SingleChildRenderObjectWidget{
常量内阴影({
关键点，
this.shadows=const[]，
孩子，
})：super（key:key，child:child）；
最终列表阴影；
@凌驾
RenderObject createRenderObject（构建上下文上下文）{
最终渲染对象=_RenderInnerShadow（）；
updateRenderObject（上下文，renderObject）；
返回渲染对象；
}
@凌驾
void updatenderObject(
BuildContext上下文，_renderInnerShadowrenderObject）{
renderObject.shadows=阴影；
}
}
类_RenderInnerShadow扩展renderProxy框{
列出阴影；
@凌驾
无效绘制（绘制上下文上下文，偏移）{
if（child==null）返回；
最终边界=偏移量和大小；
context.canvas.saveLayer（bounds，Paint（））；
上下文.paintChild（子对象，偏移量）；
用于（阴影中的最终阴影）{
最终阴影矩形=边界。膨胀（阴影。模糊）；
最终阴影绘制=绘制（）
..blendMode=blendMode.src
…colorFilter=colorFilter.mode（shadow.color，BlendMode.srcOut）
..imageFilter=imageFilter.blur(
sigmaX:shadow.blurSigma，sigmaY:shadow.blurSigma）；
context.canvas
..保存层（shadowRect、shadowPaint）
…平移（shadow.offset.dx，shadow.offset.dy）；
上下文.paintChild（子对象，偏移量）；
context.canvas.restore（）；
}
context.canvas.restore（）；
}
}

使用唯一标识符作为键 范例

key:key（'SomeKey'）

或

---

key:key（SomeObject.id）

您能否共享所需外观的屏幕截图？很可能有一种更有效的方法可以实现同样的效果。@AlexHartford我在问题“是否有可能使其像普通的BoxShadow一样高效？”中添加了一幅图片-使用

Canvas.saveLayer

和

ImageFilter.blur

？我不认为so@pskink为了得到更好的结果，你会做些什么改变？我不知道你真正期望的是什么，但也许你应该看看他们是怎么做的-有点像定制的

装饰
类-类似于我不久前做的东西（它显示了做类似事情的基本代码）