Flutter Widget组件库:AnimatedOpacity
32
2024-07-10
描述
AnimatedOpacity
是动画版Opacity
,可在设定时间内自动将子元素的透明度过渡到指定值。它可以帮助我们轻松地制作出平滑的过渡效果。在处理UI交互时,如渐显和渐隐效果等,AnimatedOpacity可以大显身手。
主要属性
duration
:动画持续时长onEnd
:动画结束调用的方法opacity
:目标透明度
示例
class LogoFade extends StatefulWidget {
const LogoFade({super.key});
@override
State<LogoFade> createState() => LogoFadeState();
}
class LogoFadeState extends State<LogoFade> {
double opacityLevel = 1.0;
void _changeOpacity() {
setState(() => opacityLevel = opacityLevel == 0 ? 1.0 : 0.0);
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AnimatedOpacity(
opacity: opacityLevel,
duration: const Duration(seconds: 3),
child: const FlutterLogo(),
),
ElevatedButton(
onPressed: _changeOpacity,
child: const Text('Fade Logo'),
),
],
);
}
}
这里例子展示了一个Flutter Logo和一个Fade Logo按钮,点击按钮会在3秒钟内将Flutter Logo变为全透明,再次点击在3秒钟内从全透明变为不透明。
注意!
将 AnimatedOpacity 的透明度设置为零并不能阻止对其子 Widget 进行命中测试。这可能使用户感到疑惑,因为他们可能看不到任何东西,并可能认为这块区域不可点击。
对于某些只在绘制位置时计算其位置的 Widget(如 Flow),当透明度动画达到零时,AnimatedOpacity Widget 完全不会绘制它们,这可能会导致异常,因为这些 Widget 并没有被绘制。
为了避免此类问题,通常建议在将透明度设置为零时使用 IgnorePointer
Widget。这可以在子 Widget 淡出动画时阻止与子树中的任何子 Widget 进行交互。
- 0
- 0
-
赞助
微信支付宝 -
分享