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