能让子组件进行Align(对齐)动画,可指定时长和曲线,有动画结束事件。

相关组件

Align AlignTransition

AnimatedAlign基本使用

  1. <br />【child】 : 孩子组件 【Widget】<br />【duration】 : 动画时长 【Duration】<br />【onEnd】 : 动画结束回调 【Function()】<br />【alignment】 : 对齐方式 【AlignmentGeometry】<br />【curve】 : 动画曲线 【Duration】<br />【padding】 : 内边距 【EdgeInsetsGeometry】<br />![145.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589457732825-8f61cd01-4d19-496c-8a3c-678c22fa5e38.gif#align=left&display=inline&height=314&margin=%5Bobject%20Object%5D&name=145.gif&originHeight=314&originWidth=502&size=401722&status=done&style=none&width=502)
import 'package:flutter/material.dart';
class CustomAnimatedAlign extends StatefulWidget {
  @override
  _CustomAnimatedAlignState createState() => _CustomAnimatedAlignState();
}

class _CustomAnimatedAlignState extends State<CustomAnimatedAlign> {
  final Alignment start = Alignment(0, 0);
  final Alignment end = Alignment.bottomRight;

  Alignment _alignment;

  @override
  void initState() {
    _alignment = start;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _buildSwitch(),
        Container(
          color: Colors.grey.withAlpha(22),
          width: 200,
          height: 100,
          child: AnimatedAlign(
            duration: Duration(seconds: 1),
            curve: Curves.fastOutSlowIn,
            alignment: _alignment,
            onEnd: () => print('End'),
            child: Container(
              height: 40,
              width: 80,
              alignment: Alignment.center,
              color: Colors.blue,
              child: Text(
                '张风捷特烈',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildSwitch() => Switch(
          value: _alignment == end,
          onChanged: (v) {
            setState(() {
              _alignment = v ? end : start;
            });
          });
}