Flutter Duration详细概述

简介: 在Flutter中,Duration 表示 持续时间,如1天,1小时,1分钟,1秒,100毫秒,100纳秒等。

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


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);
        }
      });
    }
  }
相关文章
|
3月前
|
容器
Flutter 组件(一)组件概述
Flutter 组件(一)组件概述
80 0
N..
|
3月前
|
开发框架 Dart Android开发
Flutter概述
Flutter概述
N..
33 0
|
缓存 前端开发 定位技术
Flutter游戏引擎Flame系列笔记 - 1.Flame引擎概述
本文介绍Flutter游戏开发现状以及Flame游戏引擎的整体情况与相关概念。
1279 0
|
存储 前端开发 API
Flutter 状态管理概述【Flutter 专题 7】
Flutter 状态管理:概述 状态管理是 UI 框架必须实现的关键特性之一并且实现得很好。正是出于这个原因,许多开发人员已经开始构建专用的状态管理库;内置的解决方案对他们来说还不够,或者他们想根据自己的口味进行调整。
152 0
Flutter 状态管理概述【Flutter 专题 7】
|
索引 容器
Flutter PageView 使用详细概述
优美的应用体验 来自于细节的处理,更源自于码农的自我要求与努力,当然也需要码农年轻灵活的思维,不局限于思维,不局限语言限制,才是编程的最高境界。 本文章讲述 Flutter 跨平台开发中 PageView的详细配置使用。
Flutter PageView 使用详细概述
|
3月前
|
缓存 监控 前端开发
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
【4月更文挑战第30天】本文探讨了Flutter应用启动优化策略,包括理解启动过程、资源加载优化、减少初始化工作、界面布局简化、异步初始化、预加载关键数据、性能监控分析以及案例和未来优化方向。通过这些方法,可以缩短启动时间,提升用户体验。使用Flutter DevTools等工具可助于识别和解决性能瓶颈,实现持续优化。
160 0
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
|
2月前
|
开发框架 前端开发 测试技术
Flutter开发常见问题解答
Flutter开发常见问题解答
|
3月前
|
前端开发 C++ 容器
Flutter-完整开发实战详解(一、Dart-语言和-Flutter-基础)(1)
Flutter-完整开发实战详解(一、Dart-语言和-Flutter-基础)(1)
|
9天前
|
移动开发 前端开发 JavaScript
"跨界大战!React Native、Weex、Flutter:三大混合开发王者正面交锋,揭秘谁才是你移动应用开发的终极利器?"
【8月更文挑战第12天】随着移动应用开发的需求日益增长,高效构建跨平台应用成为关键。React Native、Weex与Flutter作为主流混合开发框架各具特色。React Native依托Facebook的强大支持,以接近原生的性能和丰富的组件库著称;Weex由阿里巴巴开发,性能优越尤其在大数据处理上表现突出;Flutter则凭借Google的支持及独特的Dart语言和Skia渲染引擎,提供出色的定制能力和开发效率。选择时需考量项目特性、团队技能及生态系统的成熟度。希望本文对比能助你做出最佳决策。
30 1
|
2月前
|
开发框架 移动开发 Android开发
构建高效移动应用:探索Flutter开发框架
【6月更文挑战第28天】随着移动设备的普及,用户对移动应用的需求日益增长。开发者面临着在众多平台间提供无缝体验的挑战。本文深入探讨了Flutter框架如何通过其跨平台特性、热重载功能以及丰富的组件库简化移动应用的开发流程,同时确保高性能和优雅的用户界面设计。
39 2