Flutter Widget 之AnimatedOpacity

392 阅读1分钟

有时您想要更改widget的可见性,可以通过淡入视图或在为选择某些内容时使其不那么突出。

对于所有那些情况请看看AnimatedOpacity。

首先,使用AnimatedOpacity widget包装要激活的widget,

然后设置希望在不透明之间转换的持续时间。

最后,设置不透明度参数,要查看此激活,您可能希望使该参数由可以通过类似setState调用之类的变量改变的变量控制。

AnimatedOpacity(
    child: myWidget,
    duration: const DUtation(seconds: 1),
    opacity: _currentOpacity,
)

//elsewhere in the code
setState(() => _currentOpacity = 1);

不透明度为0表示它完全不可见,

不透明度为1表示它完全不透明。

您还可以将其设置为介于两者之间的任何值。

曲线参数控制不透明度碎时间转换的速率。

AnimatedOpacity(curve: Curves.linear)
AnimatedOpacity(curve: Curves.elasticOut)

AnimatedOpacity是一个隐式动画widget。

如果您修改不透明度值,它会为您设置动画。

但是,如果要显示控制不透明度动画,或许与另一个动画结合使用,请查看FadeTransition widget。

如果想了解有关AnimatedOpacity的内容,或者关于Flutter的其他功能,请访问flutter.dev

原文翻译自视频:视频地址