flutter - 使用 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 时小部件是否仍然呈现，那么 no。

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

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

更具体的，典型的:

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

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

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

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

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

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