Flutter动画SizeTransition使用解析

待我称王封你为后i 2023-10-07 16:56 3阅读 0赞

> 志在巅峰的攀登者，不会陶醉在沿途的某个脚印之中，在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就是不知为什么，如果你迷茫，不妨来瞅瞅码农的轨迹。

在 Flutter 中 ，SizeTransition 可以理解为尺寸动画。

更多应用知识点，小编已总结在书中

*  [手机点击查看][Link 1]
 *  [电脑点击查看][Link 2]  
    ![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]

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

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

本文章实现的效果是

![在这里插入图片描述][5c9c93876c404395aab9865ff4b9d69b.gif_pic_center]

##### SizeTransition 简述 #####

const SizeTransition({
        
        Key? key,
        this.axis = Axis.vertical,
        required Animation<double> sizeFactor,
        this.axisAlignment = 0.0,
        this.child,
      })

*  sizeFactor：动画控制，例如 AnimationController
 *  axis：表示动画出现的方式，分别是Axis.vertical和Axis.horizontal，垂直方向和横轴方向
 *  axisAlignment：表示动画出现的原始位置偏移量，如果是在垂直方向指的是y，如果是横轴方向指的是x

##### 本实例 Demo #####

测试页面入口

main() {
        
      runApp(MaterialApp(
        //不显示 debug标签
        debugShowCheckedModeBanner: false,
        //显示的首页面
        home: DemoSizeTransition(),
      ));
    }

然后就是 DemoSizeTransition如下：

///代码清单
    class DemoSizeTransition extends StatefulWidget {
        
      @override
      _DemoSizeTransitionState createState() => _DemoSizeTransitionState();
    }
    
    class _DemoSizeTransitionState extends State<DemoSizeTransition>
        with SingleTickerProviderStateMixin {
        
      
      late AnimationController _animationController;
    
      @override
      void initState() {
        
        super.initState();
    
        _animationController =
            new AnimationController(vsync: this, duration: Duration(seconds: 1));
      }
    
      @override
      Widget build(BuildContext context) {
        
        return Scaffold(
          appBar: AppBar(title: Text("SizeTransition")),
          body: SizeTransition(
            //偏移量
            axisAlignment: 0.0,
            //动画控制
            sizeFactor: _animationController,
            axis: Axis.horizontal,
            child: buildContainer(),
          ),
          floatingActionButton: FloatingActionButton(
            child: Text("开始"),
            onPressed: () {
        
              _animationController.forward(from: 0);
            },
          ),
        );
      }
    
      Container buildContainer() {
        
        return Container(
          //子Widget 对齐方式
          alignment: Alignment.center,
          width: 300,
          //高度
          height: 200,
          //背景颜色
          color: Colors.blue,
          child: Text(
            "早起的年轻人",
            style: TextStyle(color: Colors.white),
          ),
        );
      }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70_pic_center]

[Link 1]: https://m.tb.cn/h.f6IsZcl?sm=b5555a
[Link 2]: https://detail.tmall.com/item.htm?id=658886049139
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ed9ecf4aacc84e5cb17d5b486e431083.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16
[Flutter _]: https://blog.csdn.net/zl18603543572/article/details/93532582
[Link 3]: https://gitee.com/android.long/flutter-ho/blob/279b5185f50a3379c71a74fc6c51b421f59c0354/lib/src/pages/demo/demo18/demo_DateRangPage.dart
[github _]: https://github.com/zhaolongs
[Link 4]: https://study.163.com/instructor/1021406098.htm?_trace_c_p_k2_=09d88ef1f37645abadcc2b58620d4b00
[5c9c93876c404395aab9865ff4b9d69b.gif_pic_center]: https://img-blog.csdnimg.cn/5c9c93876c404395aab9865ff4b9d69b.gif#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/433b4eda50384198aeeda8a6d2c99cf0.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI=,size_16,color_FFFFFF,t_70#pic_center