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

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

命名路由主要是修改如下几个地方:
(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下使用命名路由实现页面跳转)