flutter 中的ModalRoute 传值

ModalRoute 传值 - 基础路由传值

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

RouteSettings 构造函数如下：

代码语言：javascript复制

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

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

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

代码语言：javascript复制

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

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

ModalRoute 构造如下：

代码语言：javascript复制

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

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

代码语言：javascript复制

// 新路由页面
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 dart

0 人点赞