【第三天 - Flutter Route 规划分享】

今日的程序码 => GitHub

前言

大家应该都知道 Flutter 的跳页都会分成 2 种方式

• 没有 Named 的用 MaterialPageRoute 官方文件
• 有 Named 的，用一般 route 官方文件

这边我会简单介绍一下这两者的用法，想要分享一下，我习惯用的方法，和资料夹的架构。

MaterialPageRoute、Named

1. MaterialPageRoute
   他有两种写法，两种写法都可以

Navigator.push(context, MaterialPageRoute(builder: (context)=> new Page1())),

Navigator.of(context, rootNavigator: false).push(MaterialPageRoute(builder: (context) => new Page1())),

• 第二种写法的 rootNavigator 非必填，预设为 false，代表他会去找距离你最近节点的 Navigator。如果 rootNavigator = true，他则会去找 App 一打开，第一个碰到的 Navigator。当作换页的根据，也就是 MaterialApp 里面的路由控制器。

如果这边没有听懂的话，没关系，之後会讲 BottomNavigationBar，到时候会再次带入这个观念。

2. Named
   必须设定路由

new MaterialApp(
  home: new Screen1(),
  routes: <String, WidgetBuilder> {
    'page1': (BuildContext context) => new Page1(),
    'page2' : (BuildContext context) => new Page2(),
  },
)

 Navigator.pushNamed(context, 'page2'),

Navigator.of(context,rootNavigator: false).pushNamed('page2'),

带参数到下一个画面

Navigator.pushNamed(context, RouteName.bbb, arguments: '注意，这边只能传一个参数，如果想要传多个参数，请自己写个物件包起来'),

@override
Widget build(BuildContext context) {
 final String string =ModalRoute.of(context)!.settings.arguments as String;
 return Text(string);
}

3. 通用的观念

• 观念：每一次跳页就是堆积木一样。

假设现在有个情境 A 画面要跳到 B，在这边我会写成 A->B 的样子。

• push ：A->B，积木由上到下，从 A 变成 B,A
• pop ：A->B，积木由上到下，从 A,B 变成 B
• pushReplacement：A->B，盖上去取代，积木由上到下，从 A 变成 B
• popAndPushNamed：A->B，先移开最上层的在盖上去，积木由上到下，从 A,C 变成 C 再变成 B,C
• pushAndRemoveUntil：：A->B，先盖上去然後把底下的全部移开，积木由上到下，从 A,C 变成 B,A,C 再变成 B
• 当然不只这些，剩下的可以去 官网 找

哪一种比较好？

没有哪一种比较好，就是看习惯问题而已。It's up to you.

我自己是用 Named 的方式。（我觉得这样比较好控制跳页的动画等等～～，我可以专门开一个页面管理它）。

资料夹架构 + 如何管理 Route

1. MyApp

     return MaterialApp(
        // 告知我的路由器是哪个
        onGenerateRoute: MyRouter.generateRoute,
        // 告知 App 开启後第一个画面是什麽
        initialRoute: RouteName.aaa
    );

2. MyRouter
   这边是我的路由控制器，控制要跳转的画面是哪个元件，使用什麽动画跳转。
   RouteName 是一个字串。
   MyRoute 会对应到画面。

class RouteName {
  static const String aaa = 'aaa';
  static const String bbb = 'bbb';
}

class MyRouter {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      case RouteName.aaa:
        return NoAnimRouteBuilder(new AAA());
      case RouteName.bbb:
        return NoAnimRouteBuilder(new BBB());
      default:
        return CupertinoPageRoute(
            builder: (_) => Scaffold(
                  body: Center(
                    child: Text('No route defined for ${settings.name}'),
                  ),
                ));
    }
  }
}

例：

Navigator.pushNamed(context, RouteName.aaa),

那这样的话 MyRouter 的 settings.name 就会是 RouteName.aaa

3. NoAnimRouteBuilder
   这是我用来控制 Animation 的 Builder，这边可以客制化它。

transitionsBuilder 的官方文件

class NoAnimRouteBuilder extends PageRouteBuilder {
  final Widget page;

  NoAnimRouteBuilder(this.page)
      : super(
      opaque: false,
      pageBuilder: (context, animation, secondaryAnimation) => page,
      transitionDuration: Duration(milliseconds: 0),
      transitionsBuilder:
          (context, animation, secondaryAnimation, child) => child);
}