AnimatedOpacity 动画的渐变

最新推荐文章于 2024-05-21 21:49:43 发布

原创最新推荐文章于 2024-05-21 21:49:43 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

flutter 专栏收录该内容

220 篇文章

订阅专栏

本文展示了如何在Flutter中通过 AnimatedOpacity widget 动画控制子组件，如Flutter Logo，实现渐变透明度的效果。通过点击按钮，Logo会自动在3秒内从完全不透明变为完全透明，反之亦然。这是一个简单的状态管理示例，用于创建动态UI。

AnimatedOpacity 动画的渐变，自动转变子组件的透明度


class LogoFade extends StatefulWidget {
  const LogoFade({Key? key}) : super(key: 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(
          child: const Text('Fade Logo'),
          onPressed: _changeOpacity,
        ),
      ],
    );
  }
}

。。