使用 AnimatedOpacity 隐藏和显示复杂的小部件在 Flutter 中无效吗？

Question

我正在使用在我的应用程序的各种状态之间AnimatedOpacity隐藏一些小部件Stack。

例如，我有Stack下面的ListView动画加载指示器（微光），以便在填充列表时，动画背景不透明度逐渐设置为 0。

Stack:
 - AnimatedOpacity (
      opacity: _populated ? 0.0 : 1.0, 
      child: AnimatedLoadingWidget,
   ),
 - ListView

我是否正确理解 AnimatedLoadingWidget 中的动画会继续并呈现，即使不透明度设置为 0.0？它对应用程序的性能有影响吗？

Answer 1

如果您想知道当不透明度为 0 时小部件是否仍然呈现，那么no .

Opacity如果不透明度严格等于 0 ，它的动画变体足够聪明，不会渲染孩子。

但这还不够。即使不透明度为 0，您的加载小部件仍然在小部件树中，并且其动画继续播放。

更具体地说，典型的：

Opacity(
  opacity: 0,
  child: const CircularProgressIndicator(),
)

微调器将不可见，但它仍会无休止地请求新帧。

为了解决这个问题，我们可以TickerMode像这样使用小部件：

Opacity(
  opacity: 0,
  child: TickerMode(
    enabled: false,
    child: const CircularProgressIndicator(),
  ),
)

这样做将使使用动画框架播放的动画“静音”，因此，微调器将停止请求新帧。

或者，您可以使用AnimatedCrossFade自定义layoutBuilder来实现类似的效果。