zoukankan      html  css  js  c++  java
  • Flutter自定义路由PageRouteBuilder

    自定义路由翻转,渐变,左右滑动

    方法如下:

    1. 首先继承 PageRouteBuilder ,重写方法
    2. 将MaterialPageRoute改为showSearch

      

    import 'package:flutter/material.dart';
    
    
    class animation_route extends PageRouteBuilder {
    
      final Widget widget;
    
      animation_route(this.widget)
      : super(
        transitionDuration: const Duration(milliseconds: 500), //设置动画时长500毫秒
        pageBuilder: (
          BuildContext context,
          Animation<double> animation1,
          Animation<double> animation2){
          return widget;
        },
        transitionsBuilder: (
          BuildContext context,
          Animation<double> animation1,
          Animation<double> animation2,
          Widget child
        ){
          //渐变过渡
    //      return FadeTransition(//渐变过渡 0.0-1.0
    //        opacity: Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
    //          parent: animation1, //动画样式
    //          curve: Curves.fastOutSlowIn, //动画曲线
    //        )),
    //        child: child,
    //      );
          //翻转缩放
    //      return RotationTransition(
    //        turns: Tween(begin: 0.0, end: 1.0).
    //        animate(
    //          CurvedAnimation(
    //            parent: animation1,
    //            curve: Curves.fastOutSlowIn,
    //          )
    //        ),
    //        child: ScaleTransition(
    //          scale: Tween(begin: 0.0, end: 1.0).
    //          animate(CurvedAnimation(parent: animation1, curve: Curves.fastOutSlowIn)),
    //          child: child,
    //        ),
    //      );
          //左右滑动
          return SlideTransition(
            position: Tween<Offset>(
              begin: Offset(-1.0, 0.0),
              end: Offset(0.0, 0.0)
            )
            .animate(CurvedAnimation(parent: animation1, curve: Curves.fastOutSlowIn)),
            child: child,
          );
        }
    
      );
    
    
    }
    

      使用方法

    Navigator.push(context, MaterialPageRoute(builder: (context){ return test(); })); 改为Navigator.push(context, animation_route(test()));

  • 相关阅读:
    JVM相关小结
    Tachyon框架的Worker心跳及Master高可用性分析
    Yarn中的几种状态机
    Spark on Yarn遇到的几个问题
    Spark1.0.x入门指南
    Mapreduce执行过程分析(基于Hadoop2.4)——(三)
    Mapreduce执行过程分析(基于Hadoop2.4)——(二)
    Mapreduce执行过程分析(基于Hadoop2.4)——(一)
    使用HttpClient实现文件的上传下载
    Hadoop2.3+Hive0.12集群部署
  • 原文地址:https://www.cnblogs.com/ckAng/p/10768894.html
Copyright © 2011-2022 走看看