来自Flutter组件库

描述

动画版的Align，可在给定的持续时间内自动将子元素的位置调整到给定的对齐方式。

它基于 Align 小部件，并提供 duration 和 curve 参数来控制动画的时间长度和速度曲线。

AnimatedAlign 的核心运作方式与 Align 小部件相同，也是通过 alignment 参数进行对齐，但是当 alignment 的值发生改变时，子组件的位置并不会立即改变，而是会经过一个动画过程，从原位置过渡到新位置。

构造函数

const AnimatedAlign({
  Key? key,
  required this.alignment,  
  this.child,
  this.heightFactor,
  this.widthFactor,
  Curve curve = Curves.linear,  // 动画的速率曲线
  required Duration duration,   // 必传，动画的持续时间
  VoidCallback? onEnd,  // 动画结束时的回调
}) : assert(alignment != null),
assert(widthFactor == null || widthFactor >= 0.0),
assert(heightFactor == null || heightFactor >= 0.0),
super(key: key, curve: curve, duration: duration, onEnd: onEnd);

示例

class AnimatedAlignExample extends StatefulWidget {
  const AnimatedAlignExample({super.key});

  @override
  State<AnimatedAlignExample> createState() => _AnimatedAlignExampleState();
}

class _AnimatedAlignExampleState extends State<AnimatedAlignExample> {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          selected = !selected;
        });
      },
      child: Center(
        child: Container(
          width: 250.0,
          height: 250.0,
          color: Colors.red,
          child: AnimatedAlign(
            alignment: selected ? Alignment.topRight : Alignment.bottomLeft,
            duration: const Duration(seconds: 1),
            curve: Curves.fastOutSlowIn,
            child: const FlutterLogo(size: 50.0),
          ),
        ),
      ),
    );
  }
}