performance - Flutter 中的高性能模糊/不透明？

Question

我喜欢使用 BackdropFilter 的模糊霜效果(参见 this)。

但是，由于 BackdropFilter 具有不透明度，并且我正在模糊处理的小部件也具有不透明度，因此性能非常糟糕。这也是因为我每秒重绘我的小部件几次，但这应该不是问题，因为 Flutter 可以达到 60fps？

我打开了 checkerboardOffscreenLayers并查看数英里的棋盘。 :O棋盘出现是由于 blurScreen，而不是由于 widgetToBlur 但 widgetToBlur 确实降低了性能可能是因为(在我的真实代码中，不是这个例子)它每秒多次调用 setState()。

有没有更有效的方法来制作模糊/不透明？上面的链接表示将不透明度单独应用于小部件。但是我不能用模糊(下面的 blurScreen)做到这一点，因为 BackdropFilter 必须堆叠在我的 widget-that-does-the-redrawing 之上。我删除了模糊效果，我的表​​现更好了(没有棋盘，应用程序没有崩溃)。

有问题的 build() 代码:

final widgetToBlur = Container(
  child: Opacity(
    opacity: 0.3,
    // In my actual code, this is a Stateful widget.
    child: Text('Spooky blurry semi-transparent text!'),
  ),
);

final blurScreen = BackdropFilter(
  filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
  child: Container(
    decoration: BoxDecoration(
      color: _backgroundColor.withOpacity(0.3),
    ),
  ),
);

return Container(
  child: Stack(
    children: <Widget>[
      widgetToBlur,
      blurScreen,
      Text('This is in front of the blurred background'),
    ],
  ),
);

Answer 1

我最终使用 Paint 绘制了 widgetToBlur 一次，模糊，不透明。和 Canvas .

这意味着它只在 initState() 中运行一次模糊和不透明操作，并且在小部件的整个生命周期中永远不需要重新渲染。

如果其他人最终遇到这个问题，您可以发表评论，我可以提供更多帮助。