Flutter – AnimatedContainer 小部件

在Flutter中，AnimatedContainer小部件可以在指定小部件的时间内创建动画效果。它可以帮助我们简化代码并更容易地创建动画。

构造函数

以下是AnimatedContainer的构造函数：

AnimatedContainer({
  Key key,
  this.alignment,
  this.padding,
  Color color,
  Decoration decoration,
  Decoration foregroundDecoration,
  double width,
  double height,
  BoxConstraints constraints,
  this.margin,
  this.transform,
  this.child,
  Curve curve = Curves.linear,
  Duration duration,
  VoidCallback onEnd,
})

参数

• alignment：AlignmentGeometry类型，指定小部件的对齐方式，因此可以在动画过程中进行对齐。
• padding：EdgeInsetsGeometry类型，指定小部件的内边距。
• color：Color类型，指定小部件的颜色。此参数和decoration参数不能同时使用。
• decoration：Decoration类型，指定小部件的背景颜色、边框、阴影等装饰效果。此参数和color参数不能同时使用。
• foregroundDecoration：Decoration类型，指定小部件的前景装饰效果。
• width：double类型，指定小部件的宽度。
• height：double类型，指定小部件的高度。
• constraints：BoxConstraints类型，指定小部件的约束条件。
• margin：EdgeInsetsGeometry类型，指定小部件的外边距。
• transform：Matrix4类型，指定小部件的变换矩阵。
• child：Widget类型，指定小部件的子元素。
• curve：Curve类型，默认为Curves.linear，指定小部件的动画曲线。
• duration：Duration类型，默认为Duration.zero，指定小部件的动画时间。
• onEnd：VoidCallback类型，指定小部件动画结束时的回调函数。

示例代码

以下是一个简单的示例代码，它将创建一个空容器，并在点击按钮时更改其颜色和大小：

import 'package:flutter/material.dart';

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

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

class _MyAppState extends State<MyApp> {
  Color _color = Colors.blue;
  double _width = 100;
  double _height = 100;

  void _changeProperties() {
    setState(() {
      _color = Colors.red;
      _width = 200;
      _height = 200;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('AnimatedContainer Demo')),
        body: Center(
          child: GestureDetector(
            onTap: _changeProperties,
            child: AnimatedContainer(
              width: _width,
              height: _height,
              decoration: BoxDecoration(
                color: _color,
                borderRadius: BorderRadius.circular(50),
              ),
              duration: Duration(seconds: 1),
              curve: Curves.easeInOut,
            ),
          ),
        ),
      ),
    );
  }
}

结论

AnimatedContainer小部件是Flutter中非常有用的小部件之一，可以帮助我们轻松创建动画效果。使用AnimatedContainer的优点之一是您无需编写任何其他代码即可创建动画。只需指定小部件的初始和最终状态，AnimatedContainer将自动处理中间状态。