使用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(),
  ),
)

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

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