Flutter学习总结（十五、Flutter页面跳转)_flutter 页面跳转平移

Flutter页面跳转

一起从0开始学习Flutter!

在Flutter中的页面跳转使用路由的机制，这里路由又分为静态路由和动态路由，静态路由我们在最开始的时候注册好每个页面对应的路由就可以，动态路由需要我们在使用的时候去生成路由，需要注意的是静态路由我们是无法传递参数的，如果想要传递参数需要使用动态路由，现在我们开始学习这两种路由。

静态路由

静态路由我们需要先进行路由注册，我们看下最开始我们创建一个demo时MyApp里的MaterialApp，里面有个属性是routes，我们需要将我们的静态路由信息注册到这里。例如：

routes: {
        "/list/scroll":(BuildContext context) =>ScrollViewDemo(),
        "/list/sample":(BuildContext context) =>ListSample(),
      }
1
2
3
4

在我们使用的时候我们可以使用定义的名字来进行跳转：

Navigator.of(context).pushNamed('/list/scroll');
1

如果我们跳转到下一个页面后想要返回数据结果我们需要在then后传入一个带有传参的函数，静态调用只能是获取到后一页的返回数据，但是无法传入到后一页的数据。

Navigator.of(context).pushNamed("/list/scroll").then((value){
              print("有回调了");
            });
1
2
3

在跳转后的页面如果我们想要返回前面一页则可以调用pop()方法，可以将想要返回的参数传入进去。

Navigator.of(context).pop(100);
1

动态路由

我们如果想要传递参数到下一页的时候就需要使用动态路由了，我们看下如何调用的：

Navigator.of(context)
                .push(MaterialPageRoute(builder: (context) => NetsScrollViewClass(title: "Hello NetsScrollView",)));
1
2

我们需要传入一个builder，看下builder为：

typedef WidgetBuilder = Widget Function(BuildContext context);
1

我们需要传入一个带有Context参数，返回一个Widget。
我们想要传递的参数就需要修改要跳转页面的构造方法，可以传入想要传递的参数即可。

我们还可以添加跳转动画，例如添加一个平移动画：

 Navigator.of(context).push(PageRouteBuilder(pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation){
              return NetsScrollViewClass(title: "Transition Animation",);
            },
              transitionsBuilder: (context,  animation,  secondaryAnimation, child)=> SlideTransition(position: Tween<Offset>(
                begin: const Offset(1.0, 0.0),
                end: const Offset(0.0, 0.0)
              ).animate(animation),child: child,)
            ),);
1
2
3
4
5
6
7
8

本篇的路由跳转比较简单，大家可以练习。

接下来我们学习Flutter中的弹框