Flutter AnimatedAlign 使用解析

灰太狼 2023-10-07 16:53 9阅读 0赞

在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 从入门 到精通系列文章在这里][Flutter _]
 *  [当然也必需是要有源码的 在这里了][Link 1]
 *  [github 有点慢 不妨来看看码云的源码吧][github _]
 *  [系列学习教程在这里][Link 2]

Flutter AnimatedAlign 动画效果

[Flutter _]: https://blog.csdn.net/zl18603543572/article/details/93532582
[Link 1]: https://gitee.com/android.long/flutter-ho/blob/279b5185f50a3379c71a74fc6c51b421f59c0354/lib/src/pages/demo/demo18/demo_DateRangPage.dart
[github _]: https://github.com/zhaolongs
[Link 2]: https://study.163.com/instructor/1021406098.htm?_trace_c_p_k2_=09d88ef1f37645abadcc2b58620d4b00