Flutter Duration详细概述

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


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);
        }
      });
    }
  }
上一篇:React---新扩展RenderProps和ErrorBoundary


下一篇:Qt - 集成罗技G29方向盘官方SDK(Windows平台)