Flutter中的AnimatedContainer：动态容器组件

AnimatedContainer可在属性改变时平滑过渡。

AnimatedContainer 是 Flutter 中一个强大的动画组件，能够自动在属性变化时触发平滑的过渡动画。你可以通过改变其 width、height、color、padding、margin 等属性来实现动态效果。只需在属性变化时重新构建组件，AnimatedContainer 会自动处理动画过渡，无需额外编写动画代码。

AnimatedContainer 是 Flutter 中一个非常实用的组件，它允许你在属性发生变化时自动应用动画效果。你可以通过改变 AnimatedContainer 的属性（如宽度、高度、颜色、边距等）来触发动画，而无需手动管理动画控制器。

主要属性

• duration: 定义动画的持续时间。
• curve: 定义动画的曲线（如 Curves.easeInOut）。
• width 和 height: 容器的宽度和高度。
• color: 容器的背景颜色。
• alignment: 容器内子组件的对齐方式。
• padding 和 margin: 容器的内边距和外边距。
• decoration: 容器的装饰（如边框、圆角等）。

示例代码

以下是一个简单的 AnimatedContainer 示例，展示了如何通过点击按钮来改变容器的大小和颜色：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('AnimatedContainer Example')),
        body: Center(
          child: AnimatedContainerExample(),
        ),
      ),
    );
  }
}

class AnimatedContainerExample extends StatefulWidget {
  @override
  _AnimatedContainerExampleState createState() => _AnimatedContainerExampleState();
}

class _AnimatedContainerExampleState extends State<AnimatedContainerExample> {
  bool _isExpanded = false;

  void _toggleContainer() {
    setState(() {
      _isExpanded = !_isExpanded;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        AnimatedContainer(
          duration: Duration(seconds: 1),
          width: _isExpanded ? 200.0 : 100.0,
          height: _isExpanded ? 200.0 : 100.0,
          color: _isExpanded ? Colors.blue : Colors.red,
          curve: Curves.easeInOut,
          child: Center(
            child: Text(
              _isExpanded ? 'Expanded' : 'Collapsed',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: _toggleContainer,
          child: Text('Toggle Container'),
        ),
      ],
    );
  }
}

解释

• AnimatedContainer 的 width 和 height 会根据 _isExpanded 的状态动态变化。
• color 属性也会根据 _isExpanded 的状态在红色和蓝色之间切换。
• 点击按钮会触发 _toggleContainer 方法，从而改变 _isExpanded 的状态，并触发动画。

AnimatedContainer 是 Flutter 中实现简单动画的便捷方式，适合需要根据状态变化自动应用动画的场景。