Flutter 页面路由

2019-09-24 Flutter 评论

路由跳转在flutter中是一个非常重要的概念。我们在开发中不可避免的需要涉及到页面之间的交互，传参，出参等操作。
这就引出了我们的路由，在flutter中，有两种实现路由的方式，分别是基本路由和router命名路由。
本节针对路由做一次系统的梳理和记录

1. navigator 基本路由

使用很简单的，
首先新建一个页面 widget 例如 
    class TextDemo extends StatefulWidget {
        ······
        ······
    }
假如说我们的页面中有一个按钮被触发的时候，我们通过如下代码即可 跳转至 TextDemo页面

1 2	Navigator.push( context, new MaterialPageRoute(builder: (context) => TextDemo()));

2. route 命名路由

1. 首先新建routes列表，我们已经创建了 HomeTabs,和SearchTabs两个页面

var routes = {
	 '/home':(context,{arguments}) => HomeTabs(arguments:arguments),=
 	'/search':(context) => SearchTabs(),=
 };

2. MaterialApp 通过重写 routes属性，进行route注册

MaterialApp(
     	title: 'Flutter Demo',
     	home: MyHomePage(title: 'Flutter Demo Home Page'),
     	routes: routes,
     ）

3. 最后就是在触发的时候进行跳转.一行代码搞定

1	Navigator.pushNamed(context, "/home");

3. 替换路由

在当前页面加载目标页面，用目标页面替换当前

1	Navigator.pushReplacementNamed(context, "/home"

4. 返回根路由

在 A widget打开多个页面以后，返回 A
1. 参考替换路由
2.

Navigator.pop(context,"result from route"),
             Navigator.of(context).pushAndRemoveUntil(
                 MaterialPageRoute(
                   builder: (context) => MyApp(),
             ), (routes) => routes == null)

5. router 传参

route传参的做法和上一步基本类似 
1. 首先定义route列表，参考上一步做法
2. MaterialApp 通过重写 onGenerateRoute，进行route接管。 基本是固定写法

MaterialApp(
   	onGenerateRoute: (RouteSettings settings) {
       final String name = settings.name;
       final Function pageBuilder = this.routes[name];
       if (pageBuilder != null) {
         if (settings.arguments != null) {
           final Route route = MaterialPageRoute(
             builder: (context) => pageBuilder(context,arguments: settings.arguments),
           );
           return route;
         } else {
           final Route route = MaterialPageRoute(
             builder: (context) => pageBuilder(context),
           );
           return route;
         }
       }
       return null;
     },

3. 最后就是在触发的时候进行跳转

1
2
3

Navigator.pushNamed(context, "/home",arguments: {
            "id" : "11sasdfasdfasdfadfafdafasdfadfafdasdfafa",
          })

4. 在目标页面接收传入的参数

	class HomeTabs extends StatefulWidget {

  final arguments;

  HomeTabs({this.arguments});


  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return HomTabsState();
  }
}

class HomTabsState extends State<HomeTabs> {

  @override
  Widget build(BuildContext context) {

    var argu = widget.arguments;

    var va = "";

    if (argu != null) {
      va = argu["id"];
    }

    return Text("home  = $va "  );
  }

}

6. 接收返回值

1. 开启一个新的页面(widget)，当目标页面被关闭，我们需要接收返回值的时候，

void toRouteDemo(BuildContext context) async {
   final result = await Navigator.push(context,MaterialPageRoute(builder:(context) => RouteDemo() ));

   Fluttertoast.showToast(msg: result);
 }