Flutter的AnimatedContainer实现容器样式的动画切换-阿里云开发者社区

开发者社区> 开发与运维> 正文

Flutter的AnimatedContainer实现容器样式的动画切换

简介: AnimatedContainer可以理解为Container Animat,也就是说带动画的容器,使用AnimatedContainer可以很方便的实现Widget的动画效果。

题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天。

重要消息


AnimatedContainer可以理解为Container Animat,也就是说带动画的容器,使用AnimatedContainer可以很方便的实现Widget的动画效果。

如下图所示的效果,默认情况下图片是一个正方形展示效果,当点击图片后,图片的宽度与高度由原来的100在1秒时间内过渡到200像素,并且变为圆形。
在这里插入图片描述
上图所示的效果过程就可以通过AnimatedContainer来轻松的实现,代码如下:

///AnimatedContainer 的基本使用
class AnimatedContainerPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ClipRectPageState();
  }
}

class ClipRectPageState extends State {
  ///点击标识
  bool click = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: Text("AnimatedContainer基本使用"),
      ),
      body: Center(
        ///手势识别
        child: GestureDetector(
          onTap: () {
            setState(() {
              click = !click;
            });
          },
          ///动画容器
          child: AnimatedContainer(
            ///动画插值器
            curve: Curves.bounceInOut,
            ///容器的高度
            height: click ? 200 : 100,
            ///容器的宽度
            width: click ? 200 : 100,
            ///容器的装饰
            decoration: BoxDecoration(
              ///背景图片
                image: DecorationImage(
                  ///加载资源目录下的图片
                  image: AssetImage('assets/images/2.0x/banner4.webp'),
                  fit: BoxFit.cover,
                ),
                ///圆角
                borderRadius: BorderRadius.all(Radius.circular(
                  click ? 200 : 0,
                ))),
            ///过渡时间
            duration: Duration(milliseconds: 15000),
          ),
        ),
      ),
    );
  }
}

公众号 我的大前端生涯

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章