来自Flutter组件库

描述

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 进行交互。