关于ios:Flutter-32Flutter进阶教程路由Router和导航Navigator以及传值

5次阅读

共计 2899 个字符，预计需要花费 8 分钟才能阅读完成。

作者 | 弗拉德
起源 | 弗拉德（公众号：fulade_me)

在挪动开发中，咱们管页面之间的跳转叫做路由。在 iOS 中指的就是 ViewController 之间的跳转，在 Android 中就是 Activity 之间的跳转。路由是在挪动端开发中十分重要的概念，它负责管理着各个页面之间的跳转还有传值工作，是必不可缺少的控件。

为了不便咱们治理跳转页面，Flutter为咱们提供了路由 Map。
路由 Map 由在 main.dart 文件外面 MaterialApp 的参数 routes 治理，routes参数接管一个 Map，Map 外面就是咱们我的项目的路由 Map，你能够关上我的我的项目看到 routes 参数如下：

routes: {"/": (context) => MainPage(),
  "TextDemoPage": (context) => TextDemoPage(),
  "RaisedButtonDemoPage": (context) => RaisedButtonDemoPage(),
  "FlatButtonDemoPage": (context) => FlatButtonDemoPage(),
  "OutlineButtonDemoePage": (context) => OutlineButtonDemoePage(),
  "IconButtonDemoPage": (context) => IconButtonDemoPage(),
  "ContainerDemoPage": (context) => ContainerDemoPage(),
  "StatefulWidgetDemoPage": (context) => StatefulWidgetDemoPage(),
  "TextFieldDemoPage": (context) => TextFieldDemoPage(),
  "ImageDemoPage": (context) => ImageDemoPage(),
  "ColumnDemoPage": (context) => ColumnDemoPage(),
  "RowDemoPage": (context) => RowDemoPage(),
  "FlexibleDemoPage": (context) => FlexibleDemoPage(),
  "WrapDemoPage": (context) => WrapDemoPage(),
  "ListViewDemoPage": (context) => ListViewDemoPage(),
  "GridViewDemoPage": (context) => GridViewDemoPage(),
  "BottomNavigationBarDemoPage": (context) =>
      BottomNavigationBarDemoPage(),
  "RouterDemoPage": (context) => RouterDemoPage(),
  "RouterDemoPage2": (context) => RouterDemoPage2(),},

其中 key 为/对应的 Value 是整个 Flutter 我的项目的入口页面，这里须要另外一个很重要的参数 initialRoute 来配合应用
咱们给 initialRoute 参数传值如下：

    initialRoute: "/",

这里示意的是 Flutter 我的项目的入口页面对应的 key 是/，那么就会找到在 routes 中/对应的页面，也就是MainPage()

须要留神的是：
默认咱们新创建的 Flutter 我的项目中 MaterialApp 是带有 home 这个参数的，它也示意也是入口页面。如果咱们想要要应用路由 Map 的形式来治理路由，肯定须要把 home 参数删除掉。

在咱们申明好路由 Map 之后，咱们就能够传入后面的 key 的值来实现页面的跳转工作，这个时候咱们须要借助的 API 是Navigator.pushNamed

 @optionalTypeArgs
  static Future<T> pushNamed<T extends Object>(
    BuildContext context,    /// context
    String routeName, {     /// 路由 Map 中 key 的值
    Object arguments,        /// 参数
   }) {return Navigator.of(context).pushNamed<T>(routeName, arguments: arguments);
  }

只须要传入路由 Map 中 key 的值就能够实现跳转。
代码如下：

Navigator.pushNamed(context, "RouterDemoPage2");

因为咱们是跨平台开发，Flutter 帮忙咱们实现了跳转时候的转场动画，在 iOS 中动画是从右侧滑入到左侧，返回的时候同样是由左侧滑出到右侧。在 Android 则是由下方弹出显示到上方，返回的时候是由上方退出到下方弹出。

很多时候咱们心愿跳转的时候能够传值过来，这个时候咱们能够通过自定义 MaterialPageRoute 来实现传值。

MaterialPageRoute({
    /// builder 办法
    @required this.builder,
    /// 配置信息
    RouteSettings settings,
    ///  默认状况下，当入栈一个新路由时，原来的路由依然会被保留在内存中，如果想在路由没用的时候开释其所占用的所有资源，能够设置 maintainState 为 false。this.maintainState = true,
    ///  示意新页面是否是全屏展现，在 iOS 中，如果 fullscreenDialog 为 true，新页面将会从屏幕底部滑入
    bool fullscreenDialog = false,
})

咱们只须要在构建新的页面的时候传入咱们想要传递的参数即可

Navigator.of(context).push(MaterialPageRoute(builder: (context) {return RouterDemoPage3(passText: "Fulade");
}));

传递返回值咱们应用 Navigator 的pop办法即可

Navigator.pop(context, "pop value");

pop办法接管一个参数为返回的携带的参数，如果咱们有多个参数，能够把它封装为 List 或Map即可。

返回值咱们须要在 push 办法前面应用 then 来接管

Navigator.of(context)
    .push(MaterialPageRoute(builder: (context) {return RouterDemoPage3(passText: "Fulade");
})).then((value) {setState(() {title = value;});
});