Flutter 动画可见性和不透明度

Question

Flutter Visibility Widget 允许隐藏和禁用其中包含的所有内容。但是，我想要为不透明度设置动画并调用可见性。使用可见性小部件会覆盖动画不透明度。根据我对其他语言的了解，这是可以预料的。

有没有一种简单方便的方法来实现动画的不透明度和可见性。它将使生活比设置计时器更简单。

下面的示例使用 bool of hasAccess 使用 Provider 作为状态管理。

child: Stack(
  children: [

  Visibility(
    visible: hasAccess ? false : true,
    child: AnimatedOpacity(
      duration: Duration(milliseconds: 400),
      opacity: hasAccess ? 0 : 1,
      child: Text('Not logged in'),
  )), 

  Visibility(
    visible: hasAccess ? true : false,
    child: AnimatedOpacity(
      duration: Duration(milliseconds: 400),
      opacity: hasAccess ? 1 : 0,
      child: Text('Is logged in'),
   ),
  ), 
 ],
)

Answer 1

我希望这能解决问题。您需要在可见性小部件中设置maintainAnimation=true和maintainState=true。

Visibility(
     visible: hasAccess,
     maintainAnimation: true,
     maintainState: true,
     child: AnimatedOpacity(
        duration: const Duration(milliseconds: 500),
        curve: Curves.fastOutSlowIn,
        opacity: hasAccess ? 1 : 0,
        child: Text('abc')
     )
    )

Answer 2

Visibility和Opacity是两个完全不同的东西。

Opacity可用于更改其子项的不透明度。AnimatedOpacity允许其动画并FadeTransition允许其过渡。然而，不透明度仅处理不透明度。即使你看不到，孩子仍然画在屏幕上。它仍然会响应指针事件并且仍然占用计算资源。

该类Visibility是各种其他类的合并，包括IgnorePointer. 根据给定的设置，它要么用占用最少资源且没有内容的小部件完全替换子部件（默认为SizedBox.shrink()），要么移动它OffScreen，或者只是阻止指针事件。它总是会在没有任何动画的情况下使其不可见。它可以有效地完全替换一个小部件，将其移出屏幕或禁用指针事件，同时始终使子部件不可见。

使用AnimatedOpacity或FadeTransition可以让您为不透明度设置动画。一旦动画完成并且子项的不透明度为 0，就可以使用Visibility. 您可以通过侦听器、计时器或您能想到的任何其他方法找到动画的状态。

你会发现像AnimatedOpacity这样的Widget也有回调函数。当动画完成时，您可以使用这些函数之一。您可以创建一个状态，_visible例如称为bool. 然后将其设置为false动画AnimatedOpacity完成后。然后，您可以将 AnimatedOpacity 的子级包装在 Visibility Widget 中，将其属性设置为_visible状态布尔值。

Visibility(visibility: _visible, child: <yourChildWidget>);