共计 2899 个字符,预计需要花费 8 分钟才能阅读完成。
作者 | 弗拉德
起源 | 弗拉德(公众号:fulade_me)
路由
在挪动开发中,咱们管页面之间的跳转叫做路由。在 iOS 中指的就是 ViewController 之间的跳转,在 Android 中就是 Activity 之间的跳转。路由是在挪动端开发中十分重要的概念,它负责管理着各个页面之间的跳转还有传值工作,是必不可缺少的控件。
路由 Map
为了不便咱们治理跳转页面,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
参数删除掉。
Navigator.pushNamed
在咱们申明好路由 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;});
});
then
函数 波及到了 Dart 语音中很重要的概念 await 和 future,前面有机会咱们再来具体的说。
想体验以上的示例的运行成果,能够到我的 Github 仓库我的项目 flutter_app
->lib
->routes
->router_page.dart
查看,并且能够下载下来运行并体验。