Flutter AnimatedAlign 使用解析

Posted 2021-08-29 早起的年轻人

在Flutter中, Align 可以用来实现 Widget的对齐排版。

在Flutter中, AnimatedAlign 可以用来实现 Widget的对齐排版变化时形成一个动画过渡，也是一种简单的动画效果。

///代码清单
class DemoAlignPage extends StatefulWidget {
  @override
  _DemoAlignPageState createState() => _DemoAlignPageState();
}

class _DemoAlignPageState extends State<DemoAlignPage> {
  //对齐方式
  Alignment _alignment = Alignment.center;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("这里是首页")),
      body: Container(
        child: AnimatedAlign(
          alignment: _alignment,
          //动画曲线
          curve: Curves.bounceInOut,
          //动画执行完成
          onEnd: () {
            print("执行结束 ");
          },
          duration: Duration(seconds: 2),
          child: Text(
            "早起的年轻人",
            style: TextStyle(
              fontWeight: FontWeight.w600,
              color: Colors.blueAccent,
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Text("切换"),
        onPressed: () {
          _alignment = _alignment == Alignment.center
              ? Alignment.topCenter
              : Alignment.center;
          setState(() {});
        },
      ),
    );
  }
}

如果你有兴趣 你可以关注一下公众号 biglead 来获取最新的学习资料。

• Flutter 从入门 到精通系列文章在这里
• 当然也必需是要有源码的 在这里了
• github 有点慢 不妨来看看码云的源码吧
• 系列学习教程在这里

Flutter AnimatedAlign 动画效果