Flutter路由——Navigator2.0
Navigator 2.0提供了一系列全新的接口,可以实现将路由状态成为应用状态的一部分,新增的API如下:
- Page:用来表示Navigator路由栈中各个页面的不可变对象,Page是一个抽象类通常使用它的派生类:MaterialPage或CupertinoPage;
- Router:用来配置要用Navigator展示的页面列表,通常该页面列表会根据系统或应用程序的状态改变而改变,除了直接使用Router本身外还可以使用MaterialApp.router()来创建Router;
- RouterDelegate:定义应用程序中的路由行为,例如Router如何知道应用程序状态的变化以及如何响应,监听RouteInformationParser和应用状态,并使用当前列表来构建Pages;
- RouteInformationParser:可缺省,主要应用于web,持有RouteInformationProvider提供的RouteInformation,可以将其解析为我们定义的数据类型;
- BackButtonDispatcher:响应后退按钮,并通知Router;
上面的API中BackButtonDispatcher很少用到,对于移动端来说,只需要用到Page、Router和RouterDelegate这三个API即可。
RouterDelegate与Router、RouteInformationParser在一起的交互和应用程序的状态如下:
- 1.当系统打开一个新页面时,RouteInformationParser会将其转换为应用中的具体数据类型T;
- 2.该数据类型会被传递给RouterDelegate的setNewRoutePath方法,我们可以在这里更新路由状态;
- 3.notifyListeners会通知Router重建RouterDelegate;
- 4.RouterDelegate.build()返回一个新的Navigator实例,并最终展示出打开的页面;
代码实例:
/// @description hu
import 'package:flutter/material.dart';
import 'package:up_china/model/video_model.dart';
import 'package:up_china/page/home_page.dart';
import 'package:up_china/page/video_detail_page.dart';
void main() {
runApp(UPApp());
}
class UPApp extends StatefulWidget {
@override
State<StatefulWidget> createState() => _UPAppState();
}
class _UPAppState extends State<UPApp> {
UPRouteDelegate _routerDelegate = UPRouterDelegate();
UPRouteInformationParser _routeInformationParser =
UPRouteInformationParser();
@override
Widget build(BuildContext context) {
print('_UPAppState:build');
//定义route
var widget = Router(
routeInformationParser: _routeInformationParser,
routerDelegate: _routerDelegate,
///routeInformationParser为null时可缺省,routeInformation提供者
routeInformationProvider: PlatformRouteInformationProvider(
initialRouteInformation: RouteInformation(location: '/')),
);
return MaterialApp(home: widget);
}
}
class UPRouterDelegate extends RouterDelegate<UPRoutePath>
with ChangeNotifier, PopNavigatorRouterDelegateMixin<UPRoutePath> {
final GlobalKey<NavigatorState> navigatorKey;
UPRoutePath? path;
List<MaterialPage> pages = [];
VideoModel videoModel;
//为Navigator设置一个key,必要的时候可以通过navigatorKey.currentState来获取到NavigatorState对象
UPRouterDelegate() : navigatorKey = GlobalKey<NavigatorState>();
@override
Widget build(BuildContext context) {
//构建路由栈
pages = [
pageWrap(HomePage(
onJumpToDetail: (data) {
this.videoModel = data;
notifyListeners();
},
)),
if (videoModel != null)
pageWrap(
VideoDetailPage(videoModel),
)
];
print('UPRouterDelegate:build');
return Navigator(
key: navigatorKey,
pages: pages,
onPopPage: (route, result) {
print('Navigator:onPopPage');
//在这里可以控制是否可以返回
if (!route.didPop(result)) {
return false;
}
return true;
},
);
}
//路由初始化时,Router 会调用setNewRoutePath 方法来更新应用程序的路由状态:
@override
Future<void> setNewRoutePath(UPRoutePath path) async {
print('UPRouterDelegate:setNewRoutePath:$path');
this.path = path;
}
}
///可缺省,主要应用与web,持有RouteInformationProvider 提供的 RouteInformation ,可以将其解析为我们定义的数据类型。
class UPRouteInformationParser extends RouteInformationParser<UPRoutePath> {
@override
Future<UPRoutePath> parseRouteInformation(
RouteInformation routeInformation) async {
final uri = Uri.parse(routeInformation.location);
print('UPRouteInformationParser:parseRouteInformation:uri:$uri');
if (uri.pathSegments.length == 0) {
return UPRoutePath.home();
}
return UPRoutePath.detail();
}
}
///定义路由path
class UPRoutePath {
final String location;
UPRoutePath.home() : location = "/";
UPRoutePath.detail() : location = "/detail";
}
///创建Page
pageWrap(Widget child) {
return MaterialPage(
key: ValueKey(child.hashCode),
child: child,
);
}
- APP启动:
1.启动;
2.RouteInformationParser:parseRouteInformation;
3.RouterDelegate:build;
4.RouterDelegate:setNewRoutePath;
5.RouterDelegate:build;
- 打开页面:RouterDelegate:build 返回一个新的Navigator实例,并展示新的页面;
- 返回:Navigator:onPopPage;
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgbaaig
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13