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

Question

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

例如，我有 Stack 和 ListView 以及下面的动画加载指示器 (shimmer)，因此当填充列表时，动画背景不透明度为逐渐设置为 0.

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

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

Answer 1

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

Opacity 及其动画变体足够聪明，如果不透明度严格等于 0，则不会渲染子项。

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

更具体地说，典型的是：

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

微调器将不可见，但它仍会不断请求新帧。

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

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

这样做会 "mute" 使用动画框架播放的动画，因此，微调器将停止请求新帧。

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

Is using AnimatedOpacity to hide and show complex widgets not effective in Flutter?