【Flutter】AnimatedContainer：动画容器

基本概念

AnimatedContainer 是一个可以动态改变其属性的容器控件。当其属性发生变化时，它会自动以动画的方式过渡到新的状态，而不需要手动编写动画代码。这使得开发者能够轻松实现各种动态效果，例如按钮的缩放、颜色变化、位置移动等。

主要属性

以下是 AnimatedContainer 的一些常用属性：

1. width 和 height

• 用于设置容器的宽度和高度。
• 当这些属性的值发生变化时，AnimatedContainer 会以动画的方式调整其大小。

2. color

• 设置容器的背景颜色。
• 支持从一种颜色平滑过渡到另一种颜色。

3. margin 和 padding

• 分别用于设置容器的外边距和内边距。
• 支持动画过渡，例如从一个边距值平滑过渡到另一个边距值。

4. decoration

• 用于设置容器的装饰，例如边框、阴影等。
• 支持动画过渡，例如从一个边框颜色过渡到另一个边框颜色。

5. transform

• 用于设置容器的变换效果，例如旋转、缩放等。
• 支持动画过渡，例如从一个缩放比例平滑过渡到另一个缩放比例。

6. duration

• 指定动画的持续时间，类型为 Duration。
• 例如：Duration(milliseconds: 500) 表示动画持续 500 毫秒。

7. curve

• 指定动画的曲线，用于控制动画的速度变化。
• 常用的曲线包括 Curves.linear（线性）、Curves.easeIn（加速曲线）、Curves.easeOut（减速曲线）等。

示例

以下例子中，展示了一个当鼠标悬浮在上面时会放大的组件：

class _ArticleItemCardState extends State<_ArticleItemCard> {
  bool _isHovered = false;

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (_) {
        setState(() {
          _isHovered = true;
        });
      },
      onExit: (_) {
        setState(() {
          _isHovered = false;
        });
      },
      child: AnimatedContainer(
        duration: Duration(milliseconds: 150),
        transform: Matrix4.identity()..scale(_isHovered ? 1.05 : 1.0),
        transformAlignment: Alignment.center,
        margin: EdgeInsets.only(top: 24),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(cornerRadius)),
          boxShadow: commonBoxShadow,
        ),
        child: SizedBox(),
      ),
    );
  }
}