Question

我喜欢使用BackdropFilter的模糊霜效果（请参见this）。

但是，由于BackdropFilter具有不透明度，并且由于我要模糊的小部件也具有不透明度，因此性能令人震惊。这也是因为我每秒重绘窗口小部件几次，但是考虑到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()中运行一次模糊和不透明度操作，并且在整个窗口小部件的整个生命周期中都不必重新进行模糊渲染。

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

Answer 2

我有一个类似的问题，也归结为使用画布和油漆。现在唯一的问题是，如果我对图像应用MaskFilter，尽管sigma很高，也不会发生很多事情。只有边缘有些模糊。

现在的问题是为什么会这样？您是如何解决这个问题的？

canvas.drawImageRect(
  image, 
  Offset(0, 0) & srcSize, 
  Offset(-delta, 0) & dstSize, 
  Paint()..maskFilter = MaskFilter.blur(
    BlurStyle.normal, 100.0
  )
);

对于那些感兴趣的人，我已经将图像加载到init函数中，如下所示：

rootBundle.load("assets/gift_1.png").then((bd) {
  Uint8List lst = new Uint8List.view(bd.buffer);
  Ui.instantiateImageCodec(lst).then((codec) {
    codec.getNextFrame().then((frameInfo) {
      image = frameInfo.image;
    });
  });
});

P.s。不幸的是，我还不能发表任何评论。因此在此作为贡献，包括解决方案提案

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

2 个答案: