【Flutter之旅】路由管理

环境介绍以及参考文献

本示例是在 Linux 16.04.1-Ubuntu 搭配 VS Code 使用。

《Flutter实战》电子书
Flutter中文网

简单示例

在上一个示例中添加代码如下：

简单的路由切换

新建一个新路由

class NewRoute extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("New route"),),body: Center(child: Text("This is new route"),),);}
}

添加点击跳转事件，在 children: <Widget>[ 内部添加

children: <Widget>[// ... 两个 Text 组件// 添加按钮TextButton(child: Text("open new route"),style: TextButton.styleFrom(backgroundColor: Colors.blue, primary: Colors.white),onPressed: () {// Navigator 是一个路由管理的组件，它提供了打开和退出路由页方法。Navigator 通过一个栈来管理活动路由集合// Future push(BuildContext context, Route route) // 将给定的路由入栈（即打开新的页面），返回值是一个Future对象，用以接收新路由出栈（即关闭）时的返回数据。// bool pop(BuildContext context, [ result ])// 将栈顶路由出栈，result为页面关闭时返回给上一个页面的数据。// Navigator.push(BuildContext context, Route route) 等价于 Navigator.of(context).push(Route route)// MaterialPageRoute 是 Material 组件库提供的组件，它可以针对不同平台，实现与平台页面切换动画风格一致的路由切换动画。// Android，打开时从底部滑到顶部，关闭时从顶部滑到底部// IOS，打开从右侧滑到左侧，关闭时则相反Navigator.push(context, MaterialPageRoute(builder: (context) {return NewRoute();}));},),
],

带有参数的路由切换

新建一个 TipRoute 路由，接受一个文本参数，并且返回上一个路由时带上一个返回参数

class TipRoute extends StatelessWidget {TipRoute({Key? key,required this.text,}) : super(key: key);final String text;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("Tips"),),body: Padding(padding: EdgeInsets.all(18),child: Center(child: Column(children: <Widget>[Text(text),ElevatedButton(onPressed: () => Navigator.of(context).pop(Text("return data")),child: Text("back"),)],),),),);}
}

添加点击跳转事件

children: <Widget>[//...    ElevatedButton(onPressed: () async {// 打开`TipRoute`，并等待返回结果var result = await Navigator.of(context).push(MaterialPageRoute(builder: (context) {return TipRoute(text: "set the value to tips route",);},),);print("return value: $result");},child: Text("open TipsRoute"),),
],

命名路由

通过给路由起一个名字，然后就可以通过路由的名字直接打开新的路由。

路由表的定义其实就是一个　map，key 为路由的名字，类型为字符串，value 是个 builder 回调函数，用来生成相应的路由 widget。

Map<String, WidgetBuilder> routes;

注册路由表

MaterialApp(title: 'Flutter Demo',initialRoute:"/", //名为"/"的路由作为应用的home(首页)theme: ThemeData(primarySwatch: Colors.blue,),// 注册路由表routes:{"new_page":(context) => NewRoute(),"/":(context) => MyHomePage(title: 'Flutter Demo Home Page'), //注册首页路由}
);

通过路由名打开新路由

Navigator.pushNamed(context, "new_page");

命名路由参数传递

有两种方法可以实现：

需要注意的是，在测试的时候 ModalRoute.of(context).settings.arguments; 这样写已经会报编译错误了显示为 The property 'settings' can't be unconditionally accessed because the receiver can be 'null'.，所以需要修改写法如下：

var args = ModalRoute.of(context)?.settings.arguments;

方法一：在路由的 build 方法获取参数

// 注册路由
routes:{
"tip1":(context) => EchoRoute(),
}
// 在 build 函数获取参数
class EchoRoute extends StatelessWidget {@overrideWidget build(BuildContext context) {var args = ModalRoute.of(context)?.settings.arguments;return Scaffold(appBar: AppBar(title: Text("New route"),),body: Center(child: Text("This is EchoRoute, received: $args"),),);}
}
// 通过名字启动带参数的路由
Navigator.of(context).pushNamed("tip1", arguments: "hi");

方法二：在路由的构造函数中获取参数

需要注意的事情是 text: ModalRoute.of(context)?.settings.arguments会报错The argument type 'Object?' can't be assigned to the parameter type 'String'，需要修改如下：

text: ModalRoute.of(context)?.settings.arguments as String

// 注册路由
routes: {
"tip2": (context){return TipRoute(text: ModalRoute.of(context)?.settings.arguments as String);
},
// 在构造函数中获取参数
class TipRoute extends StatelessWidget {TipRoute({Key? key,required this.text,}) : super(key: key);final String text;
}
// 通过名字启动带参数的路由
Navigator.of(context).pushNamed("tip2", arguments: "hi");

路由生成钩子

onGenerateRoute，它在打开命名路由时可能会被调用，之所以说可能，是因为当调用 Navigator.pushNamed(…) 打开命名路由时，如果指定的路由名在路由表中已注册，则会调用路由表中的 builder 函数来生成路由组件；如果路由表中没有注册，才会调用 onGenerateRoute 来生成路由。

MaterialApp(// ... 省略无关代码onGenerateRoute: (RouteSettings settings) {String routeName = settings.name as String;print("Open page: $routeName");switch (routeName) {case "/":return MaterialPageRoute(builder: (context) {return MyHomePage(title: 'Flutter Demo Home Page');});case "new_page":return MaterialPageRoute(builder: (context) {return NewRoute();});case "tip1":case "tip2":return MaterialPageRoute(builder: (context) {return TipRoute(text: settings.arguments as String);});default:return MaterialPageRoute(builder: (BuildContext context) {return Scaffold(body: Center(child: Text("Page not found"),));});}}
);