代码之家 › 专栏 › 技术社区 › Mary

在颤振中执行模糊/不透明度?

blur opacity flutter performance

Mary · 技术社区 · 5 年前

我喜欢使用背景滤镜的模糊霜冻效果(参见 this )

但是,因为backdropfilter具有不透明度,并且因为我正在模糊的小部件也具有不透明度,所以性能是可怕的。这也是因为我每秒重绘几次小部件,但这不应该是一个问题,因为颤振可以达到60fps?

我打开 checkerboardOffscreenLayers 再看几英里长的跳板。o 棋盘是由于 blurScreen 不是由于 widgetToBlur 但是 宽模糊 确实会降低性能,可能是因为(在我的实际代码中,不是本例)它每秒多次调用setState()。

有没有更有效的方法来制造蓝色/不透明?上面的链接表示单独对小部件应用不透明度。但是我不能用模糊来做这个。( 模糊画面 因为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'),
    ],
  ),
);

2 回复 | 直到 5 年前

Mary 5 年前

我最后画了一次宽长方形,模糊,不透明,使用 Paint 和 Canvas .

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

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

Silas 5 年前

我也有类似的问题,归根结底就是使用画布和绘画。现在唯一的问题是,如果我对图像应用一个遮罩过滤器,尽管有非常高的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.很遗憾,我还不能写任何评论;因此这里作为一个贡献,包括解决方案建议