002 flutter的路由管理--命名路由

Posted 2020-11-25 trekxu

一 .概述

在前面我们说明了普通路由和对应的参数传递,但是在实际的项目之中,我们一般更多的会去使用命名路由.

命名路由可以让我们统一的进行路由的管理.

本次我们就来说明一下对应的命名路由是怎么实现的.

 

二 .定义全局的touters

Map<String,WidgetBuilder> routes = {
  "/home" : (context) => HomePage(),
};

　在上面的代码之中,我们实际上定义了一个字符串和路由的映射关系.

上面的代码我们需要注册到flutter的统一管理之中.

void main() => runApp(
      MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text("title"),
          ),
          body: MyApp(),
        ),
        routes: routes,
      ),
    );

　　现在我们只需要使用下面的代码就可以完成命名路由了.

RaisedButton(
              child: Text("使用命名路由"),
              onPressed: (){
                Navigator.pushNamed(context, "/home");
              },
            ),

　　我们可以发现,我们使用命名路由会简单很多,这少不需要再每次使用路由的时候都写那么长的代码了,还可以进行统一的管理.

 

三 . 使用命名路由进行参数的传递

在早期的flutter之中,是不支持命名路由传值的,但是当前的最新版本是支持的.

我们现在的全局路由变成了这样:

Map<String, WidgetBuilder> routes = {
  "/home": (context) => HomePage(),
  "/search" : (context,{arguments}) => SearchPage(arguments: arguments,),
};

　　下面是使用命名路由的方式.

RaisedButton(
              child: Text(‘命名路由传值‘),
              onPressed: (){
                Navigator.pushNamed(context, ‘/search‘,arguments: {
                  "id" : 12344
                });
              },
            )

　　总结 : 

使用命名路由虽然现在变成了可行的操作,但是依然比较别扭.

还好,这些都是定死的东西,我们后面只需要按照这种方式i就可以完成命名路由传递数据了.