路由导览v1

Flutter 的路由是透过 Navigator 以栈的方式管理画面上的呈现。

Navigator 1.0

• Navigator：它是一个用来管理路由的组件，提供一个 Overlay 处理栈的内容。
• Route：这是一个抽象类别，用来定义路由的设定，例如 MaterialPageRoute。

使用方式

• push

将画面新加到 Navigator 的 stack 上

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) {
    return SomeScreen();
  }),
);

• pushNamed

使用命名路由的方式创建路由设定，就可以使用名称的方式进行切换。

Navigator.pushNamed(context, '/time'),

• pop

将 stack 最後的路由设定从 Navigator 上移除

Navigator.pop(context);

命名路由

使用命名路由的方式在程序架构的维护上会比较清楚

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/time': (context) => TimeScreen(),
        '/text': (context) => TextScreen(),
        '/image': (context) => ImageScreen(),
        '/icon': (context) => IconScreen(),
        '/button': (context) => ButtonScreen(),
        '/form': (context) => FormScreen(),
        '/layout': (context) => LayoutScreen(),
        '/container': (context) => ContainerScreen(),
        '/listview': (context) => ListViewScreen(),
        '/gridview': (context) => GridViewScreen(),
        '/datetimepicker': (context) => DateTimePickerScreen(),
        '/sliver': (context) => SliverScreen(),
      },
    );
  }
}

传递参数

push

 Navigator.push(
  context,
  MaterialPageRoute(builder: (context) {
    return SomeScreen(title: "Navigator");
  }),
);

pushNamed

pushNamed 的第三个参数可以接收 Object 型别的 arguments

  static Future<T?> pushNamed<T extends Object?>(
    BuildContext context,
    String routeName, {
    Object? arguments,
   }) {
    return Navigator.of(context).pushNamed<T>(routeName, arguments: arguments);
  }

使用方式

Navigator.pushNamed(context, '/time', DateTime.now())

@override
Widget build(BuildContext context) {
  var args = ModalRoute.of(context)!.settings.arguments;
  ...
}

pop

使用第二参数回传结果

  @optionalTypeArgs
  static void pop<T extends Object?>(BuildContext context, [ T? result ]) {
    Navigator.of(context).pop<T>(result);
  }

回传结果

Navigator.pop(context, false);

使用 await 接收 pop 回来的参数资料

var result = await Navigator.pushNamed(context, '/next')

小结

Navigator 1.0 的使用上很直觉，如果你想要切换路由时使用 push 和 pop 即可，如果使用命名式的路由在维护的管理上会更加统一，也可以使用onGenerateRoute的 hook 进行建构路由设定前的权限检查。