美文网首页
flutter下使用命名路由实现页面跳转

flutter下使用命名路由实现页面跳转

作者: 跨界师 | 来源:发表于2021-11-14 21:27 被阅读0次

    之前使用普通路由实现了页面跳转,和可以带参数跳转,今天使用另一种路由方式:命名路由,将页面与路径做映射,起到命名作用。

    命名路由主要是修改如下几个地方:
    (1)主页面代码如下:

    final routes = {
        "/search": (context) => SearchPage(),
        "/settings": (context,{arguments}) => SettingsPage(
            arguments: arguments
        ),
      };
    
    在materialApp里使用(固定写法):
    onGenerateRoute: (RouteSettings settings) {
            final String name = settings.name;
            print(name);
            final Function pageContentBuilder = this.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;
              }
            }
          },
    

    (2)触发跳转页面代码如下:

    Navigator.pushNamed(context, "/settings",arguments:{"id":"123"});
    

    (3)到达页面的参数接受,代码如下:

     final arguments;
      // args表示可能传入的参数列表
      SettingsPage({this.arguments});
    
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Scaffold(
    
          appBar: AppBar(
            title: Text(this.arguments['id']),
          ),
          body: Text(this.arguments['id']),
        );
      }
    首先,需要创建构造函数,在构造函数里面设置参数传递的对象arguments,另外,在交互代码中获取对应的参数值
    

    相关文章

      网友评论

          本文标题:flutter下使用命名路由实现页面跳转

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