Flutter之路由管理(页面跳转)

路由:核心是 路由映射表.
如：名字detail映射到 DetailPage页面等

在Flutter中，路由管理主要有两个类：Route和Navigator.

一个页面要想被路由统一管理，必须包装为一个Route

管理所有的Route的Widget，通过一个Stack来进行管理.

MaterialApp、CupertinoApp、WidgetsApp它们默认是有插入Navigator的,在需要的时候，只需要直接使用即可.
Navigator.of(context)

Navigator常用方法:

// 路由跳转：传入一个路由对象
Future push(Route route)

// 路由跳转：传入一个名称（命名路由）
Future pushNamed(
  String routeName, {
    Object arguments,
  })

// 路由返回：可以传入一个参数
bool pop([ T result ])

• 命名路由是将名字和路由的映射关系，在一个地方进行统一的管理
• 有了命名路由，就可以通过Navigator.pushNamed()方法来跳转到新的页面

放在MaterialApp的 initialRoute 和 routes 中

• initialRoute：设置应用程序从哪一个路由开始启动，设置了该属性，就不需要再设置home属性了

• routes：定义名称和路由之间的映射关系，类型为 Map

• onGenerateRoute: 通过pushNamed进行跳转，但是对应的name没有在routes中有映射关系，那么就会执行onGenerateRoute 钩子函数 . 另外, onGenerateRoute也可以作为页面跳转的权限控制.；

• onUnknownRoute: 如果打开的一个路由名称是根本不存在的，这个时候可以跳转到一个统一的错误页面。

> 打开命名路由时，如果指定的路由名在路由表中已注册，则会调用路由表中的builder函数来生成路由组件；如果路由表中没有注册，才会调用onGenerateRoute来生成路由。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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.blue, splashColor: Colors.transparent),
      initialRoute: "/",
      routes: {
 "/": (context) => MyHomePage(title: 'Flutter Demo Home Page'), //注册首页路由
 // "/home": (ctx) => HomePage(),
 "/detail": (ctx) => DetailPage()
      },
      onGenerateRoute: (settings) {  //路由钩子 .  手动创建对应的Route进行返回；
 if (settings.name == "/about") {   //settings.name: 跳转的路径名称
   return MaterialPageRoute(builder: (ctx) {
     return aboutPage(settings.arguments);  //settings.arguments：跳转时携带的参数
   });
 }
 return null;
      },
      onUnknownRoute: (settings) {
 return MaterialPageRoute(builder: (ctx) {
   return UnknownPage();
 });
      },
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State {
  // final message = ModalRoute.of(context).settings.arguments;

  var _message = '';

  _onPushTop(BuildContext context) {
    final future = Navigator.of(context)
 .pushNamed('/detail', arguments: "a home message of naned route"); //主动跳转时arguments传递参数

    // 2.获取结果
    future.then((res) {
      setState(() {
 _message = res;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
 title: Text(widget.title),
      ),
      body: Center(
 child: Column(
   mainAxisAlignment: MainAxisAlignment.center,
   children: [
     Text(
'显示结果: ' + _message,
     ),
     FlatButton(
child: Text("跳转下一页", style: TextStyle(color: Colors.black)),
onPressed: () => _onPushTop(context),
     ),
     RaisedButton(
child: Text("打开关于页"),
onPressed: () {
  Navigator.of(context).pushNamed(aboutPage.routeName,
      arguments: "a home message");
},
     ),
     RaisedButton(
child: Text("打开未知页面"),
onPressed: () {
  Navigator.of(context).pushNamed("/abc");
},
     ),
   ],
 ),
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  // 按钮点击执行的代码
  _onBackTap(BuildContext context) {
    Navigator.of(context).pop("a detail message");
  }

  @override
  Widget build(BuildContext context) {
	
    //接收上级页面传过来的参数
    final message = ModalRoute.of(context).settings.arguments;

    return new Scaffold(
      appBar: new AppBar(
 title: Text('这是第二页'),
 leading: IconButton(
   icon: Icon(Icons.arrow_back),
   onPressed: () {
     Navigator.of(context).pop("a back detail message"); //pop跳转时直接放入参数
   },
 ),
      ),
      body: Center(
 child: Column(
     mainAxisAlignment: MainAxisAlignment.center,
     children: [
Text(
  '首页带来的内容: ' + message,
),

// child:
RaisedButton(
  child: Text("返回首页"),
  onPressed: () => _onBackTap(context),
),
     ]),
      ),
    );
  }
}

class aboutPage extends StatelessWidget {
  static const String routeName = "/about";
  final String message;

  aboutPage(this.message);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
 title: Text("关于页面"),
      ),
      body: Center(
 child: Text(
   message,
   style: TextStyle(fontSize: 30, color: Colors.red),
 ),
      ),
    );
  }
}

class UnknownPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
 title: Text("错误页面"),
      ),
      body: Container(
 child: Center(
   child: Text("页面跳转错误"),
 ),
      ),
    );
  }
}