美文网首页
flutter中使用命名路由跳转时传参(pushNamed)并在

flutter中使用命名路由跳转时传参(pushNamed)并在

作者: _敏讷 | 来源:发表于2019-12-25 23:47 被阅读0次

当我使用routes属性定义命名路由,并通过下列方法进行携带arguments参数进行跳转

Navigator.pushNamed(
      context,
      routeName,
      arguments: <args>,
);

然而,当我在initState中通过下列方式接收参数时,debug console中出现了报错

@override
void initState() {
  args = ModalRoute.of(context).settings.arguments;
}

报错内容如下

20:49:44.129 4 info flutter.tools I/flutter ( 2680): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
20:49:44.129 5 info flutter.tools I/flutter ( 2680): The following assertion was thrown building Builder:
20:49:44.129 6 info flutter.tools I/flutter ( 2680): inheritFromWidgetOfExactType(_ModalScopeStatus) or inheritFromElement() was called before
20:49:44.130 7 info flutter.tools I/flutter ( 2680): _CourseCohortScreenState.initState() completed.
20:49:44.130 8 info flutter.tools I/flutter ( 2680): When an inherited widget changes, for example if the value of Theme.of() changes, its dependent
20:49:44.131 9 info flutter.tools I/flutter ( 2680): widgets are rebuilt. If the dependent widget's reference to the inherited widget is in a constructor
20:49:44.131 10 info flutter.tools I/flutter ( 2680): or an initState() method, then the rebuilt dependent widget will not reflect the changes in the
20:49:44.131 11 info flutter.tools I/flutter ( 2680): inherited widget.
20:49:44.138 12 info flutter.tools I/flutter ( 2680): Typically references to inherited widgets should occur in widget build() methods. Alternatively,
20:49:44.138 13 info flutter.tools I/flutter ( 2680): initialization based on inherited widgets can be placed in the didChangeDependencies method, which
20:49:44.138 14 info flutter.tools I/flutter ( 2680): is called after initState and whenever the dependencies change thereafter.

后来google之后找到了解决办法(虽然目前的状态还是知其然不知其所以然)

  1. 配置落地页的构建和参数调用逻辑:
//  login_page.dart
class LoginPage extends StatefulWidget {
  final String share_id;
  LoginPage({ Key key,  this.share_id }) : super(key: key);

  @override
  State<StatefulWidget> createState() => LoginPageState();
}

class LoginPageState extends  State<LoginPage> {

  @override
  void initState() {
    super.initState();
    getUserInfo(widget.user_id);    // 使用userId
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Text(
          'hello ${widget.user_id}',
          textScaleFactor: 5.0,
        ),
      ),
    );
  }
}
  1. 在MaterialApp中使用onGenerateRoute属性来定义命名路由,在需要传入参数的Widget页面定义初始化变量,并在路由定义时传入变量:
// main.dart
import './pages/login_page.dart'    // 引用LoginPage
...
onGenerateRoute: (RouteSettings settings) {
  print('build route for ${settings.name}');
  var routes = <String, WidgetBuilder>{
    "login": (ctx) => LoginPage(settings.arguments),
    "other": (ctx) => SomeWidget(),
  };
  WidgetBuilder builder = routes[settings.name];
  return MaterialPageRoute(builder: (ctx) => builder(ctx));
},

3此时便可以调用相同的方法来实现路由跳转,并传入参数

Navigator.of(context).pushNamed("login", arguments: "IDXXXX");    

相关文章

  • flutter中使用命名路由跳转时传参(pushNamed)并在

    当我使用routes属性定义命名路由,并通过下列方法进行携带arguments参数进行跳转 然而,当我在initS...

  • 八、Flutter路由

    目录一、基本路由二、基本路由传参三、命名路由四、命名路由传参五、替换路由六、返回到根路由 一、基本路由 跳转到De...

  • Next.js 跳转传参并接收接参

    介绍路由传参,接参使用方法 传参 + 跳转页面接收参数 动态路由传参 + 跳转页面接收参数创建动态路由在pag...

  • flutter页面跳转 Route 使用汇总

    一、push方式直接跳转 普通跳转 带参数跳转和接收参数 构造函数直接传参 跳转后携带参数返回 二、命名路由跳转 ...

  • Vue实战第二天

    路由组件传参 动态路由传参 静态路由传参 函数传参htm5 history 模式 设置通用路由,找不到页面跳转自定...

  • flutter 命名路由传参

    需要展示的页面 //路由配置 //跳转代码

  • Vue-Router

    1. 路由配置 默认路由跳转 在 new Router时可用的配置参数: 2.路由传参 Vue路由传参的几种方式 ...

  • vue-router

    路由安装 路由配置 路由跳转 路由传参-param使用params传参只能使用name进行引入http://loc...

  • vue路由传参.md

    两种传参方法 1.命名路由传参(name, params方式) 2.路由路径传参(path, query方式...

  • vue中组件3种编程式路由跳转传参

    路由传参 1、路由配置传参(刷新页面不会丢失参数,url会携带参数) A组件跳转B组件传参A组件 路由配置 B组件...

网友评论

      本文标题:flutter中使用命名路由跳转时传参(pushNamed)并在

      本文链接:https://www.haomeiwen.com/subject/wmsqoctx.html