前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter Duration详细概述

Flutter Duration详细概述

原创
作者头像
早起的年轻人
修改2020-12-22 10:08:16
9570
修改2020-12-22 10:08:16
举报

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


1 Duration 是什么 ?

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

2 Duration 用在哪 Duration 怎么用 ?

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

代码语言:txt
复制
  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秒的计时器

代码语言:txt
复制
    //通过毫秒定义 
    Duration duration = new Duration(milliseconds: 2000);
    //通过秒定义
    Duration duration2 = new Duration(seconds: 2);
    
    //创建计时器
    Timer timer = Timer(duration, (){
      //延时回调
    });
2.2 Duration 也可与Future 结合使用

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

代码语言:txt
复制
    //通过秒定义
    Duration duration = new Duration(seconds: 2);

    Future.delayed(duration,(){
      //延时回调
    });
2.3 Duration 也可以与 AnimatedXXX系列组件结合使用

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

代码语言:txt
复制
  double _opacity = 1.0;
  Widget buildControllerWidget() {
    //动画过渡透明度组件
    return AnimatedOpacity(
      //过渡时间
      duration: Duration(milliseconds: 1200),
      opacity: _opacity,
      child:... ,
      );
 }
2.4 Duration 用在动画系列中

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

代码语言:txt
复制
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 也会用在自定义路由中
代码语言:txt
复制
  ///从下向上打开页面
  ///[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);
        }
      });
    }
  }

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1 Duration 是什么 ?
  • 2 Duration 用在哪 Duration 怎么用 ?
    • 2.1 Duration 常与 计时器 Timer 结合使用
      • 2.2 Duration 也可与Future 结合使用
        • 2.3 Duration 也可以与 AnimatedXXX系列组件结合使用
          • 2.4 Duration 用在动画系列中
            • 2.5 Duration 也会用在自定义路由中
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档