flutter 使用不透明度设置可见性动画

rm5edbpk  于 2023-03-04  发布在  Flutter
关注(0)|答案(3)|浏览(291)

Flutter Visibility小部件允许隐藏和禁用其中包含的所有内容。但是,我希望动画显示不透明度并调用可见性。使用Visibility小部件覆盖了动画显示的不透明度。基于我对其他语言的了解,这是可以预料到的。
有没有一种简单方便的方法来实现动画的不透明度和可见性。它会使生活比设置计时器更简单。
下面的示例使用bool 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'),
   ),
  ), 
 ],
)
bmp9r5qi

bmp9r5qi1#

VisibilityOpacity是两个完全不同的东西。
Opacity可用于更改其子对象的不透明度。AnimatedOpacity允许此对象的动画,FadeTransition允许此对象的转换。然而,opacity仅处理不透明度。即使您看不到子对象,它仍会绘制在屏幕上。它仍会响应指针事件,并且仍会占用计算资源。
Visibility类是包括IgnorePointer在内的各种其他类的合并。根据给定的设置,它会将子控件完全替换为占用最少资源且没有内容的小部件(默认值是SizedBox.shrink())或移动它OffScreen或简单地阻止指针事件。它将始终使它不可见,没有任何动画。它可以有效地完全替换一个小部件,将其移到屏幕外或禁用指针事件,同时始终使子控件不可见。
使用AnimatedOpacityFadeTransition将允许您设置不透明度的动画。一旦动画完成并且子对象的不透明度为0,则是使用Visibility的时候。您可以通过侦听器、计时器或任何其他您能想到的方法来查找动画的状态。
你会发现像AnimatedOpacity这样的小部件也有回调函数。你可以使用其中一个函数来确定动画何时完成。你可以创建一个名为_visible的状态,例如bool。然后在AnimatedOpacity的动画完成后将其设置为false。然后你可以将AnimatedOpacity的子对象 Package 在可见性小部件中,将其设置为'的属性设置为_visible状态布尔值。

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

qcbq4gxm2#

如果您需要简单解决方案,那么使用以下方法:

AnimatedOpacity(
  // If the widget is visible, animate to 0.0 (invisible).
  // If the widget is hidden, animate to 1.0 (fully visible).
  opacity: _visible ? 1.0 : 0.0,
  duration: const Duration(milliseconds: 500),
  // The green box must be a child of the AnimatedOpacity widget.
  child: Container(
    width: 200.0,
    height: 200.0,
    color: Colors.green,
  ),
)

原文链接:https://docs.flutter.dev/cookbook/animation/opacity-animation

r1zk6ea1

r1zk6ea13#

我希望这能解决这个问题。你需要在可见性小部件中设置maintainAnimation=truemaintainState=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')
     )
    )

相关问题