Flutter踩坑之路（四）一路由与导航

我们前面几篇博客讲了一下Flutter中组件和基本布局的一些知识，这篇博客来讲一下关于路由的一些知识。

Flutter中的路由通俗来讲就是页面的跳转，Flutter中的跳转是通过Navigator组件管理路由导航，并提供了管理堆栈的方法。如

Navigator.push和Navigator.pop。 

Flutter中给我们提供了两种配置路由跳转的方式:

1.基本路由

2.命名路由

基本路由的使用

我们通过一个实例来看一下基本路由的使用，我们先看一下效果：

示例代码如下所示：

Navigator.push(context, MaterialPageRoute(
               builder: (context)=>ContainerDemo()
            ));
           

命名路由的使用

我们通过一个实例来看一下命名路由的使用，我们先看一下效果：

我们需要先配置路由，示例代码如下:

initialRoute: '/',
      routes: {
        '/':(context)=>MnNavigatorDemo(),
        '/popup':(context) =>PopupMenuButtonDemo(),
        '/row': (context) => RowDemo(),
      },
           

注:initialRoute是默认展示的页面

配置完路由以后，使用时，通过Navigator.pushNamed(context,"name")来导航。示例代码如下:

Navigator.pushNamed(context, '/popup');
           

页面跳转发送数据

页面跳转的时候需要发送数据到第二个页面，我们通过路由也可以传递数据

路由传递数据

1.基本路由传递数据

2.命名路由传递数据

基本路由传递数据

我们通过一个实例来看一下基本路由传递数据，我们先看一下效果：

示例代码如下：

Navigator.push(context, MaterialPageRoute(
               builder: (context)=>ReceiveDataDemo(title: "收到了吗",)//传值
            ));
           

命名路由传递数据

我们通过一个实例来看一下命名路由传递数据，我们先看一下效果：

配置路由，示例代码如下:

final routes = {
    '/': (context) => IntentNameNavigatorDemo(),
    '/popup': (context) => PopupMenuButtonDemo(),
    '/named_intent': (context, {arguments}) =>
        ReceiveNamedDataDemo(arguments: arguments),
  };
//固定写法
var onGenerateRoute=(RouteSettings settings) {
      // 统一处理
      final String name = settings.name; 
      final Function pageContentBuilder = routes[name];
      if (pageContentBuilder != null) {
        if (settings.arguments != null) {
          final Route route = MaterialPageRoute(
              builder: (context) =>
                  pageContentBuilder(context, arguments: settings.arguments));
          return route;
        }else{
            final Route route = MaterialPageRoute(
              builder: (context) =>
                  pageContentBuilder(context));
            return route;
        }
      }
};
           

跳转传值，示例代码如下:

Navigator.pushNamed(context, '/named_intent',arguments: {
              "title":"命名路由传值"
            });
           

接收参数，示例代码如下:

child: Text('接收到的值是:${arguments['title']}'),
           

我们可以把命名路由单独抽离成一个文件，示例代码如下:

final Map<String, Function> routes = {
    '/': (context) => IntentNameNavigatorDemo(),
    '/popup': (context) => PopupMenuButtonDemo(),
    '/named_intent': (context, {arguments}) =>
        ReceiveNamedDataDemo(arguments: arguments),
  };
};

var onGenerateRoute=(RouteSettings settings) {
        // 统一处理
        final String name = settings.name;   
        final Function pageContentBuilder = routes[name];        

        if (pageContentBuilder != null) {
          final Route route = MaterialPageRoute(
              builder: (context) =>
                  pageContentBuilder(context, arguments: settings.arguments));
          return route;
        }
};
           

页面跳转返回数据

页面跳转的时候不仅仅要发送数据，有时候还需要从第二个页面返回数据。

关于页面跳转返回数据，可以先看一下效果图:

示例代码如下:

Navigator.push(context, MaterialPageRoute(
                  builder: (context)=>ReturnDataDemo()
              )).then((data){
                setState(() {
                  backResult = data;
                });
              });

  Navigator.pop(context,"回传的数据,收到了吗");//回传的值
           

到这里，关于路由的知识就讲解完毕了，希望大家多多支持。