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

Question

我喜欢使用 BackdropFilter 的模糊霜效果（见这个）。

但是，因为 BackdropFilter 具有 Opacity 并且因为我模糊的小部件也具有 Opacity，所以性能非常糟糕。这也是因为我每秒重绘我的小部件几次，但鉴于 Flutter 可以达到 60fps，这应该不是问题？

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

有没有更高效的方法来制作模糊/不透明度？上面的链接说要单独对小部件应用不透明度。我不能用模糊来做到这一点（blurScreen如下），因为 BackdropFilter 必须堆叠在我的小部件之上，这就是重绘。我删除了模糊效果，我的表​​现更好（没有棋盘，应用程序不会崩溃）。

有问题的 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和Canvas绘制了 widgetToBlur 一次，模糊，不透明。

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

如果其他人最终陷入困境，您可以发表评论，我可以提供更多帮助。