路由

基础路由

MaterialPageRoute

PageRoute类是一个抽象类，表示占有整个屏幕空间的一个模态路由页面，它还定义了路由构建及切换时过渡动画的相关接口及属性

MaterialPageRoute继承自PageRoute类，可以针对不同平台，实现与平台页面切换动画风格一致的路由切换动画

• 对于 Android，当打开新页面时，新的页面会从屏幕底部滑动到屏幕顶部；当关闭页面时，当前页面会从屏幕顶部滑动到屏幕底部后消失，同时上一个页面会显示到屏幕上
• 对于 iOS，当打开页面时，新的页面会从屏幕右侧边缘一直滑动到屏幕左边，直到新页面全部显示到屏幕上，而上一个页面则会从当前屏幕滑动到屏幕左侧而消失；当关闭页面时，正好相反，当前页面会从屏幕右侧滑出，同时上一个页面会从屏幕左侧滑入

MaterialPageRoute({
    WidgetBuilder builder,
    RouteSettings settings,
    bool maintainState = true,
    bool fullscreenDialog = false,
})

• builder 是一个 WidgetBuilder 类型的回调函数，它的作用是构建路由页面的具体内容，返回值是一个 widget，通常要实现此回调，返回新路由的实例
• settings 包含路由的配置信息，如路由名称、是否初始路由（首页）。
• maintainState：默认情况下，当入栈一个新路由时，原来的路由仍然会被保存在内存中，如果想在路由没用的时候释放其所占用的所有资源，可以设置 maintainStat 为 false
• fullscreenDialog表示新的路由页面是否是一个全屏的模态对话框，在 iOS 中，如果 fullscreenDialog 为 true，新页面将会从屏幕底部滑入（而不是水平方向）

Navigator

Navigator通过一个栈来管理活动路由集合，它提供了打开和退出路由页方法

最常用的两个方法：

• Future push(BuildContext context, Route route)

  将给定的路由入栈（即打开新的页面），返回值是一个Future对象，用以接收新路由出栈（即关闭）时的返回数据

• bool pop(BuildContext context, [ result ])

  将栈顶路由出栈，result 为页面关闭时返回给上一个页面的数据

Navigator类中第一个参数为context的静态方法都对应一个Navigator的实例方法

比如Navigator.push(BuildContext context, Route route)等价于Navigator.of(context).push(Route route)

例子

1. 创建一个新路由
   • 接受别的路由传过来的 text
   • 返回上一个路由时，返回 "我是返回值"

class TempPage extends StatelessWidget {
  TempPage({Key key, required this.text}) : super(key: key);
  final String text;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("模板路由页"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Text(text),
            ElevatedButton(
              onPressed: () => Navigator.pop(context, "我是返回值"),
              child: Text("返回"),
            )
          ],
        ),
      ),
    );
  }
}

2. 主页（默认路由）
   • 创建一个按钮，可跳转至 TempPage 路由
   • 打印 TempPage 路由的返回值

class HomePage extends StatelessWidget {
	@override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: TextButton(
          child: Text('前往模板路由页'),
          onPressed: () async {
            var result = await Navigator.of(context).push(
              MaterialPageRoute(builder: (context) => AboutPage(text: '来自 HomePage 页'))
            );
            print(result);
          },
        ),
      ),
    );
  }
}

返回 HomePage 路由的结果

1. 点击返回按钮，输出 我是返回值
2. 点击顶部导航栏返回箭头，输出 null
3. 点击系统的返回键，输出 null

命令路由

即有名字的路由，我们可以先给路由起一个名字，然后就可以通过路由名字直接打开新的路由了，这为路由管理带来了一种直观、简单的方式

路由表

• key 为路由的名字

• value 是个builder 回调函数，用于生成相应的路由 widget

Map<String, WidgetBuilder> routes;

注册路由表

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  //注册路由表
  routes: {
    "temp_page": (context) => tempPage(),
    "other_page":(context) => OtherRoute(),
  },
  home: HomePage(),
);

如果想将home 也注册为命名路由

MaterialApp(
  title: 'Flutter Demo',
  initialRoute: "/", // 名为"/"的路由作为应用的home(首页)
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  //注册路由表
  routes: {
  	"/": (context) => HomePage(),
    "temp_page": (context) => tempPage(),
    "other_page":(context) => OtherRoute(),
  },
);

通过路由名打开新路由页

• Future pushNamed(BuildContext context, String routeName,{Object arguments})

  可通过第三个参数，往命名路由传递参数

Navigator.of(context).pushNamed("temp_page", arguments: "hi")

在路由页通过RouteSetting对象获取路由参数

class tempPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 获取路由参数  
    var args = ModalRoute.of(context).settings.arguments; // hi
    // 其余代码
  }
}

路由钩子

MaterialApp有一个onGenerateRoute属性，在使用 Navigator.pushNamed(...) 打开路由时，可能会被调用

• 如果路由已经在路由表中注册了，则不会调用个 onGenerateRoute 属性的函数，而会调用路由表中的builder函数来生成路由组件
• 如果路由表中没有注册，才会调用onGenerateRoute来生成路由

MaterialApp(
  onGenerateRoute:(RouteSettings settings){
	return MaterialPageRoute(builder: (context){
		 String routeName = settings.name;
		 //...
      }
    );
  }
);

例子

路由 Apage、Bpage 需要用户登录后才能进入，若没登录则跳转到登录页面

Map<String, Widget> routes = {
  'a_page': APage(),
  'b_page': BPage(),
};

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  // 不需要特殊验证的路由
  routes: {
    "not_need_to_login_page": (context) => Page(),
  },
  // 需要特殊验证的路由
  onGenerateRoute:(RouteSettings settings){
	return MaterialPageRoute(builder: (context){
	  String routeName = settings.name;
      if (!login) {
        return LoginPage(); 
      } else {
        return routes[routeName] ?? 404Page();
      }
    });
  }
  home: HomePage(),
);