管理多个页面时有两个核心概念和类：Route和 Navigator。 一个route是一个屏幕或页面的抽象，Navigator是管理route的Widget。Navigator可以通过route入栈和出栈来实现页面之间的跳转。

1. 导航跳转及返回(带传值)

• 基础跳转及返回

// 跳转
Navigator.push(context, MaterialPageRoute(builder: (context) {
     return const DetailScreen();    // 详情页面类
}));    

// 返回
Navigator.pop(context);

• 导航页面传值及返回传值

简单routes路由传值，结合 3.1中的简单路由集合。

// 传值，第一种 values是各种类型
Navigator.pushNamed(
      context,
      "/login",
      arguments: values
  );


// 下个页面获取值
 @override
  Widget build(BuildContext context) {
    // 只能在build中获取参数值
    final args = ModalRoute.of(context)!.settings.arguments as ScreenArguments;

    return Scaffold(
      appBar: AppBar(
        title: Text(args.title),
      ),
      body: Center(
        child: Text(args.message),
      ),
    );
  }

2. 导航返回拦截

监控返回按钮点击，flutter 提供 willPopScope来实现返回按钮拦截。

Widget build(BuildContext context) {
    var name = ModalRoute.of(context)!.settings.arguments as String;
    return Scaffold(
      appBar: AppBar(
        title: Text("seconds"),
      ),
      // 在顶部元素设置willPopScope
      body: WillPopScope(
        onWillPop: () async {
          print("you print is back");
          return true;
        },
        child: Container(
          child: Text("you send is $youName"),
        ),
      ),
    );
  }

• onWillPop是一个回调函数，当用户点击返回按钮时被调用，如果return true, 则同意返回
• child 则是显示的界面

3. 设置路由routes

1 设置简单路由集合

设置routes, 我这边单独设置一个routes.dart文件

// routes.dart
Map<String, Widget Function(BuildContext)> routes = {
  "/login": (context) => loginController(),
  '/main': (context) => MainTabBarView(),
  '/verifyInfo': (context) => VerifyInfoController(),   // 我的页面- 认证信息
  '/pwdManager': (context) => PwdManagerController(),   // 我的页面- 密码管理
  '/webviewLoadHTTP': (context) => WebviewLoadHTTP(),   // webView加载HTTP URL
  '/webviewLoadHTML': (context) => WebviewLoadHTML(),   // webView加载HTML
  '/checkUpdate': (context) => CheckUpdateController(),  // 我的页面- 检查版本更新
};

在main.dart中

// main.dart
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primaryColor: Global.theme,
        brightness: Brightness.light,
      ),
      debugShowCheckedModeBanner: false,
      routes: routes,    // 设置routes
      home: loginController(),
    );
  }
}

优点：页面路由只在routes.dart中设置，方便查看。
缺点：这种方式往下一个页面传值，需要在下一个页面加载时才能获取到这个值。如果下个页面setState()时，值也会刷新一下，如果传递的时id，通过id在网络获取详情信息时，刷新页面时也会重新请求数据，请求完再刷新，就会造成死循环。

2. 通过构造函数传值。

在详情页面，去除构造函数的const类型，设置构造函数参数

class DetailDelegateController extends StatefulWidget {
  DetailDelegateController({
    Key? key,
    @required this.trustInfoDic,
  }) : super(key: key);

  final Map<String, dynamic>? trustInfoDic;

  @override
  _DetailDelegateControllerState createState() => _DetailDelegateControllerState();
}

class _DetailDelegateControllerState extends State<DetailDelegateController> {

  var trustInfo;

  @override
  void initState() {
    // 初始化时请求网络。
    super.initState();
    trustInfo = widget.trustInfoDic;
    String trustId = trustInfo["id"] ?? "";
    getTrustDetailFromServer(trustId, context);
  }
}

跳转：

Navigator.push(context,
     MaterialPageRoute(
          builder: (context) => DetailDelegateController(trustInfoDic: tapTrust,),
     ),
 );

缺点： 无法使用routes设置。

3. 使用onGenerateRoute提取参数后传给相应Widget

在main.dart中，隐藏routes参数，使用onGenerateRoute方法。

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primaryColor: Global.theme,
        brightness: Brightness.light,
      ),
      debugShowCheckedModeBanner: false,
      // routes: routes,
      onGenerateRoute: (RouteSettings settings) {
        print('build route for ${settings.name}');
        var routes = routeWithSetting(settings);   // 此方法在routes.dart
        WidgetBuilder builder = routes[settings.name]!;
        return MaterialPageRoute(builder: (ctx) => builder(ctx), settings: settings);
      },
      home: loginController(),
    );
  }

// routes.dart
Map<String, Widget Function(BuildContext)> routeWithSetting(RouteSettings settings) {
  return {
    "/login": (context) => loginController(),
    '/main': (context) => MainTabBarView(),
    '/verifyInfo': (context) => VerifyInfoController(),   // 我的页面- 认证信息
    '/pwdManager': (context) => PwdManagerController(),   // 我的页面- 密码管理
    '/webviewLoadHTTP': (context) => WebviewLoadHTTP(),   // webView加载HTTP URL
    '/detailDelegate': (context) => DetailDelegateController(trustInfoDic: settings.arguments as Map<String, dynamic>,),  // 我的页面，显示委托人详情
  };
}

使用pushName传值

Navigator.pushNamed(context, "/detailDelegate", arguments: dataSourceList[index]);

详情页面类似于构造函数赋值。