码迷,mamicode.com
首页 > 其他好文 > 详细

Flutter自定义路由PageRouteBuilder

时间:2019-04-25 16:15:34      阅读:960      评论:0      收藏:0      [点我收藏+]

标签:pos   pre   pac   aci   uil   pager   offset   nim   double   

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

方法如下:

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

Flutter自定义路由PageRouteBuilder

标签:pos   pre   pac   aci   uil   pager   offset   nim   double   

原文地址:https://www.cnblogs.com/ckAng/p/10768894.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!