fultter中路由管理主要有两个类：Route和Navigator

Navigator.of(context).push普通的跳转方法

• 实现效果

  
  
• 父widget

class _TestNavigatorState extends State<TestNavigator> {
  String backMessage = "push";
  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
          child: Text(backMessage),
          onPressed: ()=>_jumpToDetail(context)
      ),
    );
  }
  void _jumpToDetail(BuildContext context){
    Future result = Navigator.of(context).push(MaterialPageRoute(
        builder: (ctx){
          return CAYJArticleDetailPage(message: "父页面传递信息");
        }
    ));
    result.then((value) {
      setState(() {
        backMessage = value;
      });
    });
  }
}

• 子widget

import 'package:flutter/material.dart';
class CAYJArticleDetailPage extends StatefulWidget {
  final String message;
  CAYJArticleDetailPage({this.message});
  @override
  _CAYJArticleDetailPageState createState() => _CAYJArticleDetailPageState();
}
class _CAYJArticleDetailPageState extends State<CAYJArticleDetailPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.message),
      ),
      body: Center(
        child: RaisedButton(
          child: Text("返回并且回传数据"),
          onPressed: (){
            Navigator.of(context).pop("已经获取子页面数据");
          },
        ),
      ),
    );
  }
}

命名路由，通过路由映射的方式跳转

• 在MaterialApp中配置路由表

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.red,
        splashColor: Colors.transparent,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        highlightColor: Colors.transparent//去除点击tabbar的过度效果
      ),
      home:TestNavigator(),
      // APPHomePage(),
      routes: {
        CAYJArticleDetailPage.routeName : (context) => CAYJArticleDetailPage()
        // "/articleDetail" : (context) => CAYJArticleDetailPage()
      },
        initialRoute: CAYJHomePage.routeName,
    );
  }
}

• 父widcget

class TestNavigator extends StatefulWidget {
  @override
  _TestNavigatorState createState() => _TestNavigatorState();
}

class _TestNavigatorState extends State<TestNavigator> {
  String backMessage = "push";
  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
          child: Text(backMessage),
          onPressed: ()=>_jumpToDetail(context)
      ),
    );
  }
  void _jumpToDetail(BuildContext context){
    Navigator.of(context).pushNamed(CAYJArticleDetailPage.routeName,arguments: {"name":"cy","age":18});
  }
}

• 子widget

import 'package:flutter/material.dart';
class CAYJArticleDetailPage extends StatefulWidget {
  static const String routeName = "/articleDetail";
  @override
  _CAYJArticleDetailPageState createState() => _CAYJArticleDetailPageState();
}
class _CAYJArticleDetailPageState extends State<CAYJArticleDetailPage> {
  @override
  Widget build(BuildContext context) {
    final data = ModalRoute.of(context).settings.arguments as Map;
    return WillPopScope(
      onWillPop: (){
        return Future.value(true);
      },
      child: Scaffold(
        appBar: AppBar(
          title: Text("${data["name"]}:${data["age"]}"),
        ),
        body: Center(
          child: RaisedButton(
            child: Text("返回并且回传数据"),
            onPressed: (){
              Navigator.of(context).pop("已经获取子页面数据");
            },
          ),
        ),
      ),
    );
  }
}

• 如果是带有构造函数的widget
  可以通过配置onGenerateRoute钩子路由方式，将跳转时传入的参数通过settings.arguments带入

Navigator.of(context).pushNamed(CAYJArticleDetailPage.routeName,arguments: {"name":"cy","age":18});

     routes: {
        CAYJArticleDetailPage.routeName : (context) => CAYJArticleDetailPage()
        // "/articleDetail" : (context) => CAYJArticleDetailPage()
      },
      onGenerateRoute: (settings){
        if(settings.name == CAYJArticleDetailPage.routeName){
          return MaterialPageRoute(
            builder: (context){
              return CAYJArticleDetailPage(settings.arguments);
            }
          );
        }
        return null; 
      },

• 配置错误路由页面

onUnknownRoute: (settings){
        return MaterialPageRoute(
          builder: (context){
            return CY404Page();
          }
        );
      },