flutter 中的ModalRoute 传值

ModalRoute 传值 - 基础路由传值

从 MaterialPageRoute 的构造参数中 可以看到 RouteSettings: settings 这个参数

RouteSettings 构造函数如下：

  const RouteSettings({
    this.name,
    this.isInitialRoute = false,
    this.arguments,
  });

其实 RouteSettings 就是路由的基本信息，arguments 可以用来存储路由相关的参数字段：

下面是一个基本的路由跳转，页面 Widget 构造函数不接受参合参数，但是路由的 settings 中配置了一个对象

Navigator.of(context).push(
  new MaterialPageRoute(
    builder: (context) {
      return NewRouteWidget();
    },
    settings: RouteSettings(
      arguments: {'name': 'postbird'},
    ), // 传参
    fullscreenDialog: true,
  ),
);

NewRouteWidget Widget 中想要拿到配置的 arguments 可以通过 ModalRoute 来拿

ModalRoute 构造如下：

  /// Creates a route that blocks interaction with previous routes.
  ModalRoute({
    RouteSettings settings,
  }) : super(settings: settings);

所以整个新页面 Widget 使用如下：

// 新路由页面
class NewRouteWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Map args = ModalRoute.of(context).settings.arguments;
    return Scaffold(
        appBar: AppBar(title: Text('获取参数')),
        body: Center(
            child: Column(
          children: <Widget>[
            Text(args.toString()),
            FlatButton(
              child: Text('pop'),
              onPressed: () {
                Navigator.pop(context);
              },
            )
          ],
        )));
  }
}

效果：

最后

这里也为想要学习Flutter的朋友们准备了两份学习资料《Flutter Dart语言编程入门到精通》《Flutter实战》，从编程语言到项目实战，一条龙服务！！

《Flutter Dart 语言编程入门到精通》

• 第一章 Dart语言基础

• 第二章 Dart 异步编程
  

• 第三章 异步之 Stream 详解

• 第四章 Dart标准输入输出流
  

• 第五章 Dart 网络编程

• 第六章 Flutter 爬虫与服务端
  

• 第七章 Dart 的服务端开发

• 第八章 Dart 调用C语言混合编程

• 第九章 LuaDardo中Dart与Lua的相互调用
  

《Flutter实战：第二版》

• 第一章：起步
• 第二章：第一个Flutter应用
• 第三章：基础组件
• 第四章：布局类组件
• 第五章：容器类组件

• 第六章：可滚动组件

• 第七章：功能型组件

• 第八章：事件处理与通知

• 第九章：动画

• 第十章：自定义组件
  

• 第十一章：文件操作与网络请求

• 第十二章：Flutter扩展

• 第十三章：国际化

• 第十四章：Flutter核心原理

• 第十五章：一个完整的Flutter应用
  

有需要学习资料的朋友扫描下方二维码即可免费领取！！！