Animating an Opacity widget directly causes the widget (and possibly its subtree) to rebuild each frame, which is not very efficient. Consider using an AnimatedOpacity or a FadeTransition instead.
在animation中使用Opacity widget直接导致widget(可能还有它的子树)每一帧都rebuild,这效率很低。 建议改用 AnimatedOpacity 或 FadeTransition。
Transparent image - 透明image
If only a single Image or Color needs to be composited with an opacity between 0.0 and 1.0, it’s much faster to directly use them without Opacity widgets.
如果只需要将单个Image或Color 展示在 0.0 和 1.0 之间的透明度,则直接使用它们(到自身的透明度)会比使用Opacity widget 快得多。
For example, Container(color: Color.fromRGBO(255, 0, 0, 0.5)) is much faster than Opacity(opacity: 0.5, child: Container(color: Colors.red)).
例如,Container(color: Color.fromRGBO(255, 0, 0, 0.5)) 比 Opacity(opacity: 0.5, child: Container(color: Colors.red)) 快得多。
The following example draws an Image with 0.5 opacity without using Opacity:
以下示例在不使用 Opacity 的情况下绘制透明度为 0.5 的Image:
Image.network(
'https://raw.githubusercontent.com/flutter/assets-for-api-docs/master/packages/diagrams/assets/blend_mode_destination.jpeg',
color: const Color.fromRGBO(255, 255, 255, 0.5),
colorBlendMode: BlendMode.modulate
)
Directly drawing an Image or Color with opacity is faster than using Opacity on top of them because Opacity could apply the opacity to a group of widgets and therefore a costly offscreen buffer will be used. Drawing content into the offscreen buffer may also trigger render target switches and such switching is particularly slow in older GPUs.
绘制直接设置自身透明度的image或Color比在它们的父节点上使用Opacity widget更快,因为Opacity widget可以运用于应用于一组widget,因此将使用开销大的offscreen buffer。 将内容绘制到offscreen buffer也可能触发渲染目标切换,并且这种切换在较旧的 GPU 中特别慢。