Flutter Duration详细概述

迷南。 2023-10-07 15:22 26阅读 0赞

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

*  [优美的音乐节奏带你浏览这个效果的编码过程][Link 1]
 *  [坚持每一天，是每个有理想青年的追求][Link 2]
 *  [追寻年轻人的脚步，也许你的答案就在这里][Link 3]
 *  [如果你迷茫 不妨来瞅瞅这里][Link 4]

--------------------

##### 1 Duration 是什么 ？ #####

Duration 表示 持续时间，如1天，1小时，1分钟，1秒，100毫秒，100纳秒等。

##### 2 Duration 用在哪 Duration 怎么用 ？ #####

直接通过构造函数来创建，参数均为可选参数，说明如下：

const Duration(
          {
        int days = 0,//天
          int hours = 0,//小时
          int minutes = 0,//分钟
          int seconds = 0,//秒
          int milliseconds = 0,//毫秒
          int microseconds = 0})//纳秒

###### 2.1 Duration 常与 计时器 Timer 结合使用 ######

如创建一个延时2秒的计时器

//通过毫秒定义 
        Duration duration = new Duration(milliseconds: 2000);
        //通过秒定义
        Duration duration2 = new Duration(seconds: 2);
        
        //创建计时器
        Timer timer = Timer(duration, (){
        
          //延时回调
        });

###### 2.2 Duration 也可与Future 结合使用 ######

如创建一个延时2秒的计时器

//通过秒定义
        Duration duration = new Duration(seconds: 2);
    
        Future.delayed(duration,(){
        
          //延时回调
        });

###### 2.3 Duration 也可以与 AnimatedXXX系列组件结合使用 ######

如透明度在1200毫秒中动态切换

double _opacity = 1.0;
      Widget buildControllerWidget() {
        
        //动画过渡透明度组件
        return AnimatedOpacity(
          //过渡时间
          duration: Duration(milliseconds: 1200),
          opacity: _opacity,
          child:... ,
          );
     }

###### 2.4 Duration 用在动画系列中 ######

如在动画控制器中定义时间周期

class _TestState extends State
        with TickerProviderStateMixin {
        
      //动画控制器
      AnimationController _ationController;
        //页面初始化方法
      @override
      void initState() {
        
        super.initState();
        //初始化 回弹执行时间为 400毫秒
        _ationController = AnimationController(
          vsync: this,
          duration: Duration(milliseconds: 400),
        );
    
    }

###### 2.5 Duration 也会用在自定义路由中 ######

///从下向上打开页面
      ///[isReplace]是否替换当前
      ///[opaque]是否是以背景透明方式打开新的页面
      ///[dismissCallBack]关闭页面的回调
      static void openPageFromBottom(BuildContext context, Widget page,
          {
        bool isReplace = false,
          bool opaque = true,
          Function(dynamic value) dismissCallBack}) {
        
        //自定义路由
        PageRouteBuilder pageRouteBuilder = new PageRouteBuilder(
            opaque: opaque,
            //页面构建
            pageBuilder: (BuildContext context, Animation<double> animation,
                Animation<double> secondaryAnimation) {
        
              //目标页面
              return page;
            },
            //打开页面过渡时间
            transitionDuration: Duration(milliseconds: 600),
            //关闭页面过渡时间
            reverseTransitionDuration: Duration(milliseconds: 400),
            //过渡动画
            transitionsBuilder: (
              BuildContext context,
              Animation<double> animation,
              Animation<double> secondaryAnimation,
              Widget child,
            ) {
        
              //平移过渡动画
              return SlideTransition(
                // 从位置(-1.0, 0.0) 平移到 (0.0, 0.0)
                position: Tween(
                  begin: Offset(0.0, 1.0),
                  end: Offset(0.0, 0.0),
                ).animate(
                  CurvedAnimation(
                    parent: animation,
                    curve: Curves.easeInOut,
                  ),
                ),
                child: child,
              );
            });
        if (isReplace) {
        
          Navigator.of(context).pushReplacement(pageRouteBuilder);
        } else {
        
          Navigator.of(context).push(pageRouteBuilder).then((value) {
        
            if (dismissCallBack != null) {
        
              dismissCallBack(value);
            }
          });
        }
      }

[Link 1]: https://www.zhihu.com/zvideo/1313903176165351424
[Link 2]: https://www.ixigua.com/6906483262659494404/
[Link 3]: https://www.bilibili.com/video/BV16T4y1M7wh/
[Link 4]: https://biglead.blog.csdn.net/article/details/93532582