Flutter AnimatedContainer 组件使用

Flutter AnimatedContainer 组件可以轻松地创建一个具有动画效果的容器，可以实现多种动画效果，比如大小变化、颜色变化、边框变化等等。使用 AnimatedContainer 组件可以在 UI 界面中添加更加灵动的动画效果，使用户交互更加友好。

使用 AnimatedContainer 组件的方式与 Container 组件类似，只是多了一个 duration 属性，用于设置动画的时间长度，默认为 200 毫秒。此外，AnimatedContainer 还有一些其他的属性，用于控制不同类型的动画效果。

下面是一个简单的 AnimatedContainer 组件的使用示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double _width = 100.0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AnimatedContainer Demo'),
        ),
        body: Center(
          child: GestureDetector(
            onTap: () {
              setState(() {
                _width = _width == 100.0 ? 300.0 : 100.0;
              });
            },
            child: AnimatedContainer(
              width: _width,
              height: 100.0,
              color: Colors.blue,
              duration: Duration(seconds: 1),
              curve: Curves.easeInOut,
            ),
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们创建了一个 StatefulWidget，其中包含一个 AnimatedContainer 组件。当用户点击组件时，AnimatedContainer 的宽度会从 100 像素变成 300 像素，然后再次点击时，宽度又会从 300 像素变为 100 像素。

在 AnimatedContainer 的属性中，我们设置了 width 属性为 _width 变量的值，_width 的值是根据用户点击而改变的。当 _width 为 100.0 时，AnimatedContainer 的宽度为 100 像素，当 _width 为 300.0 时，AnimatedContainer 的宽度为 300 像素。

另外，我们还设置了 duration 属性为 1 秒钟，这表示当 AnimatedContainer 的属性发生变化时，会以 1 秒钟的时间长度平滑地过渡到新的状态。我们还通过 curve 属性指定了动画的加速度曲线，这里使用了 Curves.easeInOut，表示在动画开始和结束时速度较慢，中间时速度较快。

需要注意的是，AnimatedContainer 组件只能在 StatefulWidget 中使用，因为 AnimatedContainer 的状态是随着时间改变而改变的，需要使用 StatefulWidget 保存 AnimatedContainer 组件的状态。如果使用 StatelessWidget，AnimatedContainer 的状态会被误认为是不可变的，无法触发动画效果。