• 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()));

  • 相关阅读:
    Random 种子问题
    Matrix issue
    Two sum.
    Best Time to Buy and Sell Stock
    Maximum difference between two elements
    二分查找法的实现和应用汇总
    Why you want to be restrictive with shrink of database files [From karaszi]
    Palindrome
    NetBeans vs Eclipse 之性能参数对比 [java060515]
    国内各大互联网公司相关技术站点不完全收录[转]
  • 原文地址:https://www.cnblogs.com/ckAng/p/10768894.html
Copyright © 2020-2023  润新知