flutter组件之AnimatedContainer

flutter组件之AnimatedContainer

自我理解：

体验了一下 就是一个带动画的容器，这个容器的很多属性 例如width、height、color等等都是支持动态变化的，并且变化的过程和效果可以通过duration，curve等属性来设置
[官网api地址]https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html
api里例子和视频生动形象，需要梯子

上代码:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class AnimatedContainerDemo extends StatefulWidget{
  @override
  State createState() {
    return _AnimatedContainerDemoState();
  }

}
class _AnimatedContainerDemoState extends State{
  bool selected = false;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        setState(() {
          selected  = !selected;
        });
      },
      child: Center(
          child: AnimatedContainer(
            width: selected ? 200.0 : 100.0,//宽度
            height: selected ? 100.0 : 200.0,//高度
            color: selected ? Colors.red : Colors.blue,//背景色
            alignment:
            selected ? Alignment.center : AlignmentDirectional.topCenter,//子元素对齐方式
            duration: Duration(seconds: 2),//动画持续时间
            curve: Curves.fastOutSlowIn,//差值器（动画效果）
            child: Container(//子元素
              height: 50,
              width: 50,
              color: Colors.yellow,
            ),
          ),
      ),
    );
  }

}

效果