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

  • 相关阅读:
    前端开发 vue,angular,react框架对比1
    前端开发 Angular
    前端开发 Vue Vue.js和Node.js的关系
    net技术
    net技术方案
    软件工程项目费用计算
    前端开发 Vue -4promise解读2
    前端开发 Vue -4promise解读1
    mybatis与hibernate区别
    struts2和springmvc的区别
  • 原文地址:https://www.cnblogs.com/ckAng/p/10768894.html
Copyright © 2020-2023  润新知