我们通常会用屏&＃xff08;Screen&＃xff09;来称呼一个页面&＃xff08;Page&＃xff09;&＃xff0c;一个完整的App应该是有多个Page组成的。
在之前的案例&＃xff08;豆瓣&＃xff09;中&＃xff0c;我们通过IndexedStack来管理了首页中的Page切换&＃xff1a;
首页-书影音-小组-市集-我的
通过点击BottomNavigationBarItem来设置IndexedStack的index属性来切换
除了上面这种管理页面的方式&＃xff0c;我们还需要实现其它功能的页面跳转&＃xff1a;比如点击一个商品跳转到详情页&＃xff0c;某个按钮跳转到发送朋友圈、微博的编辑页面。
这种页面的管理和导航&＃xff0c;我们通常会使用路由进行统一管理。
一. 路由管理
1.1. 认识Flutter路由
路由的概念由来已久&＃xff0c;包括网络路由、后端路由&＃xff0c;到现在广为流行的前端路由。
- 无论路由的概念如何应用&＃xff0c;它的核心是一个
路由映射表 - 比如&＃xff1a;名字
detail 映射到 DetailPage 页面等 - 有了这个映射表之后&＃xff0c;我们就可以方便的根据名字来完成路由的转发&＃xff08;在前端表现出来的就是页面跳转&＃xff09;
在Flutter中&＃xff0c;路由管理主要有两个类&＃xff1a;Route和Navigator
1.2. Route
Route&＃xff1a;一个页面要想被路由统一管理&＃xff0c;必须包装为一个Route
- 官方的说法很清晰&＃xff1a;An abstraction for an entry managed by a Navigator.
但是Route是一个抽象类&＃xff0c;所以它是不能实例化的
- 在上面有一段注释&＃xff0c;让我们查看MaterialPageRoute来使用
/// See [MaterialPageRoute] for a route that replaces the
/// entire screen with a platform-adaptive transition.
abstract class Route {
}
事实上MaterialPageRoute并不是Route的直接子类&＃xff1a;
- MaterialPageRoute在不同的平台有不同的表现
- 对Android平台&＃xff0c;打开一个页面会从屏幕底部滑动到屏幕的顶部&＃xff0c;关闭页面时从顶部滑动到底部消失
- 对iOS平台&＃xff0c;打开一个页面会从屏幕右侧滑动到屏幕的左侧&＃xff0c;关闭页面时从左侧滑动到右侧消失
- 当然&＃xff0c;iOS平台我们也可以使用CupertinoPageRoute
MaterialPageRoute -> PageRoute -> ModalRoute -> TransitionRoute -> OverlayRoute -> Route
1.3. Navigator
Navigator&＃xff1a;管理所有的Route的Widget&＃xff0c;通过一个Stack来进行管理的
- 官方的说法也很清晰&＃xff1a;A widget that manages a set of child widgets with a stack discipline.
那么我们开发中需要手动去常见一个Navigator吗&＃xff1f;
- 并不需要&＃xff0c;我们开发中使用的MaterialApp、CupertinoApp、WidgetsApp它们默认是有插入Navigator的
- 所以&＃xff0c;我们在需要的时候&＃xff0c;只需要直接使用即可
Navigator有几个最常见的方法&＃xff1a;
// 路由跳转&＃xff1a;传入一个路由对象
Future push(Route route)// 路由跳转&＃xff1a;传入一个名称&＃xff08;命名路由&＃xff09;
Future pushNamed(String routeName, {Object arguments,})// 路由返回&＃xff1a;可以传入一个参数
bool pop([ T result ])
二. 路由基本使用
1.1. 基本跳转
我们来实现一个最基本跳转&＃xff1a;
- 创建首页页面&＃xff0c;中间添加一个按钮&＃xff0c;点击按钮跳转到详情页面
- 创建详情页面&＃xff0c;中间添加一个按钮&＃xff0c;点击按钮返回到首页页面
核心的跳转代码如下&＃xff08;首页中代码&＃xff09;&＃xff1a;
// RaisedButton代码&＃xff08;只贴出核心代码&＃xff09;
RaisedButton(child: Text("打开详情页"),onPressed: () &＃61;> _onPushTap(context),
),// 按钮点击执行的代码
_onPushTap(BuildContext context) {Navigator.of(context).push(MaterialPageRoute(builder: (ctx) {return DetailPage();}));
}
核心的返回代码如下&＃xff08;详情页中代码&＃xff09;&＃xff1a;
// RaisedButton代码&＃xff08;只贴出核心代码&＃xff09;
RaisedButton(child: Text("返回首页"),onPressed: () &＃61;> _onBackTap(context),
)
// 按钮点击执行的代码
_onBackTap(BuildContext context) {Navigator.of(context).pop();
}
1.2. 参数传递
在跳转过程中&＃xff0c;我们通常可能会携带一些参数&＃xff0c;比如
- 首页跳到详情页&＃xff0c;携带一条信息&＃xff1a;a home message
- 详情页返回首页&＃xff0c;携带一条信息&＃xff1a;a detail message
首页跳转核心代码&＃xff1a;
- 在页面跳转时&＃xff0c;会返回一个Future
- 该Future会在详情页面调用pop时&＃xff0c;回调对应的then函数&＃xff0c;并且会携带结果
_onPushTap(BuildContext context) {// 1.跳转代码final future &＃61; Navigator.of(context).push(MaterialPageRoute(builder: (ctx) {return DetailPage("a home message");}));// 2.获取结果future.then((res) {setState(() {_message &＃61; res;});});
}
详情页返回核心代码&＃xff1a;
_onBackTap(BuildContext context) {Navigator.of(context).pop("a detail message");
}
1.3. 返回细节
但是这里有一个问题&＃xff0c;如果用户是点击右上角的返回按钮&＃xff0c;如何监听呢&＃xff1f;
方法一&＃xff1a;自定义返回的按钮&＃xff08;在详情页中修改Scaffold的appBar&＃xff09;
appBar: AppBar(title: Text("详情页"),leading: IconButton(icon: Icon(Icons.arrow_back),onPressed: () {Navigator.of(context).pop("a back detail message");},),
),
方法二&＃xff1a;监听返回按钮的点击&＃xff08;给Scaffold包裹一个WillPopScope&＃xff09;
- WillPopScope有一个onWillPop的回调函数&＃xff0c;当我们点击返回按钮时会执行
- 这个函数要求有一个Future的返回值&＃xff1a;
- true&＃xff1a;那么系统会自动帮我们执行pop操作
- false&＃xff1a;系统不再执行pop操作&＃xff0c;需要我们自己来执行
return WillPopScope(onWillPop: () {Navigator.of(context).pop("a back detail message");return Future.value(false);},child: Scaffold(appBar: AppBar(title: Text("详情页"),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [RaisedButton(child: Text("返回首页"),onPressed: () &＃61;> _onBackTap(context),),Text(_message, style: TextStyle(fontSize: 20, color: Colors.red),)],),),),
);
三. 命名路由使用
3.1. 基本跳转
我们可以通过创建一个新的Route&＃xff0c;使用Navigator来导航到一个新的页面&＃xff0c;但是如果在应用中很多地方都需要导航到同一个页面&＃xff08;比如在开发中&＃xff0c;首页、推荐、分类页都可能会跳到详情页&＃xff09;&＃xff0c;那么就会存在很多重复的代码。
在这种情况下&＃xff0c;我们可以使用命名路由&＃xff08;named route&＃xff09;
- 命名路由是将名字和路由的映射关系&＃xff0c;在一个地方进行统一的管理
- 有了命名路由&＃xff0c;我们可以通过
Navigator.pushNamed() 方法来跳转到新的页面
命名路由在哪里管理呢&＃xff1f;可以放在MaterialApp的 initialRoute 和 routes 中
initialRoute&＃xff1a;设置应用程序从哪一个路由开始启动&＃xff0c;设置了该属性&＃xff0c;就不需要再设置home属性了routes&＃xff1a;定义名称和路由之间的映射关系&＃xff0c;类型为Map
修改MaterialApp中的代码&＃xff1a;
return MaterialApp(title: &＃39;Flutter Demo&＃39;,theme: ThemeData(primarySwatch: Colors.blue, splashColor: Colors.transparent),initialRoute: "/",routes: {"/home": (ctx) &＃61;> HYHomePage(),"/detail": (ctx) &＃61;> HYDetailPage()},
);
修改跳转的代码&＃xff1a;
_onPushTap(BuildContext context) {Navigator.of(context).pushNamed("/detail");
}
在开发中&＃xff0c;为了让每个页面对应的routeName统一&＃xff0c;我们通常会在每个页面中定义一个路由的常量来使用&＃xff1a;
class HYHomePage extends StatefulWidget {static const String routeName &＃61; "/home";
}class HYDetailPage extends StatelessWidget {static const String routeName &＃61; "/detail";
}
修改MaterialApp中routes的key
initialRoute: HYHomePage.routeName,
routes: {HYHomePage.routeName: (ctx) &＃61;> HYHomePage(),HYDetailPage.routeName: (ctx) &＃61;> HYDetailPage()
},
3.2. 参数传递
因为通常命名路由&＃xff0c;我们会在定义路由时&＃xff0c;直接创建好对象&＃xff0c;比如HYDetailPage()
那么&＃xff0c;命名路由如果有参数需要传递呢&＃xff1f;
pushNamed时&＃xff0c;如何传递参数&＃xff1a;
_onPushTap(BuildContext context) {Navigator.of(context).pushNamed(HYDetailPage.routeName, arguments: "a home message of naned route");
}
在HYDetailPage中&＃xff0c;如何获取到参数呢&＃xff1f;
- 在build方法中ModalRoute.of(context)可以获取到传递的参数
Widget build(BuildContext context) {// 1.获取数据final message &＃61; ModalRoute.of(context).settings.arguments;}
3.3. 路由钩子
3.3.1. onGenerateRoute
加入我们有一个HYAboutPage&＃xff0c;也希望在跳转时&＃xff0c;传入对应的参数message&＃xff0c;并且已经有一个对应的构造方法
在HYHomePage中添加跳转的代码&＃xff1a;
RaisedButton(child: Text("打开关于页"),onPressed: () {Navigator.of(context).pushNamed(HYAboutPage.routeName, arguments: "a home message");},
)
HYAboutPage的代码&＃xff1a;
class HYAboutPage extends StatelessWidget {static const String routeName &＃61; "/about";final String message;HYAboutPage(this.message);&＃64;overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("关于页面"),),body: Center(child: Text(message, style: TextStyle(fontSize: 30, color: Colors.red),),),);}
}
但是我们继续使用routes中的映射关系&＃xff0c;就不好进行配置了&＃xff0c;因为HYAboutPage必须要求传入一个参数&＃xff1b;
这个时候我们可以使用onGenerateRoute的钩子函数&＃xff1a;
- 当我们通过pushNamed进行跳转&＃xff0c;但是对应的name没有在routes中有映射关系&＃xff0c;那么就会执行onGenerateRoute钩子函数&＃xff1b;
- 我们可以在该函数中&＃xff0c;手动创建对应的Route进行返回&＃xff1b;
- 该函数有一个参数RouteSettings&＃xff0c;该类有两个常用的属性&＃xff1a;
- name: 跳转的路径名称
- arguments&＃xff1a;跳转时携带的参数
onGenerateRoute: (settings) {if (settings.name &＃61;&＃61; "/about") {return MaterialPageRoute(builder: (ctx) {return HYAboutPage(settings.arguments);});}return null;
},
3.3.2. onUnknownRoute
如果我们打开的一个路由名称是根本不存在&＃xff0c;这个时候我们希望跳转到一个统一的错误页面。
比如下面的abc是不存在有对应的页面的
- 如果没有进行特殊的处理&＃xff0c;那么Flutter会报错。
RaisedButton(child: Text("打开未知页面"),onPressed: () {Navigator.of(context).pushNamed("/abc");},
)
我们可以创建一个错误的页面&＃xff1a;
class UnknownPage extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("错误页面"),),body: Container(child: Center(child: Text("页面跳转错误"),),),);}
}
并且设置onUnknownRoute
onUnknownRoute: (settings) {return MaterialPageRoute(builder: (ctx) {return UnknownPage();});
},
备注&＃xff1a;所有内容首发于公众号&＃xff0c;之后除了Flutter也会更新其他技术文章&＃xff0c;TypeScript、React、Node、uniapp、mpvue、数据结构与算法等等&＃xff0c;也会更新一些自己的学习心得等&＃xff0c;欢迎大家关注
京公网安备 11010802041100号