Flutter Tips: 透明度 Opacity

我们想要让一个 Widget 变得透明,通常会使用 Opacity Widget,然而过度使用 Opacity 会导致一些性能问题。我们今天就来了解一下,看看 Flutter 如何在这方面上进行一些性能优化。

为何 Opacity 的性能不足?

根据官方描述,Opacity 的绘制实际上需要将其 child 先绘制到缓冲区域,然后在重新混合到 Opacity 中。由于它需要对一组 Widget 进行不透明度的处理,所以它需要用到屏幕外缓冲区域,而使用该缓冲区域带来的后果可能会触发渲染目标切换。这种切换在早起 GPU 中特别慢。

优化场景

不透明度动画

当我们需要对一组 widget 进行动画,而这之中需要 Opacity 变化的话,请使用 AnimatedOpacity,而不是自己手动去改变 Opacity 的值。

应用与图像或 Color

例如,Container(color: Color.fromRGBO(255, 0, 0, 0.5))

Opacity(opacity: 0.5, child: Container(color: Colors.red)) 快得多。