赞
踩
flutter开发实战-常用的路由Route配置
路由(Route)在移动开发中通常指页面(Page),这跟 Web 开发中单页应用的 Route 概念意义是相同的,Route 在 Android中 通常指一个 Activity,在 iOS 中指一个 ViewController。所谓路由管理,就是管理页面之间如何跳转,通常也可被称为导航管理。Flutter 中的路由管理和原生开发类似,无论是 Android 还是 iOS,导航管理都会维护一个路由栈,路由入栈(push)操作对应打开一个新页面,路由出栈(pop)操作对应页面关闭操作,而路由管理主要是指如何来管理路由栈。
这段来自:https://book.flutterchina.club/chapter2/flutter_router.html#_2-4-1-%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%A4%BA%E4%BE%8B
下面记录一下本人常使用的路由设置。
// 定义各个页面的路由name
class RouterName {
// 隐私统一
static const String agreement = 'agreement';
// 启动页广告
static const String splash = 'splash';
// tab
static const String tab = '/';
// 用户profile
static const String profilePage = 'profilePage';
}
通过页面跳转,经常使用的是PageRouteBuilder,这里自定义几个常用的PageRouteBuilder
class NoAnimRouteBuilder extends PageRouteBuilder { final Widget page; NoAnimRouteBuilder(this.page) : super( opaque: false, pageBuilder: (context, animation, secondaryAnimation) => page, transitionDuration: Duration(milliseconds: 0), transitionsBuilder: (context, animation, secondaryAnimation, child) => child); } class FadeRouteBuilder extends PageRouteBuilder { final Widget page; FadeRouteBuilder(this.page) : super( pageBuilder: (context, animation, secondaryAnimation) => page, transitionDuration: Duration(milliseconds: 500), transitionsBuilder: (context, animation, secondaryAnimation, child) => FadeTransition( opacity: Tween(begin: 0.1, end: 1.0).animate(CurvedAnimation( parent: animation, curve: Curves.fastOutSlowIn, )), child: child, )); } class SlideTopRouteBuilder extends PageRouteBuilder { final Widget page; SlideTopRouteBuilder(this.page) : super( pageBuilder: (context, animation, secondaryAnimation) => page, transitionDuration: Duration(milliseconds: 800), transitionsBuilder: (context, animation, secondaryAnimation, child) => SlideTransition( position: Tween<Offset>( begin: Offset(0.0, -1.0), end: Offset(0.0, 0.0)) .animate(CurvedAnimation( parent: animation, curve: Curves.fastOutSlowIn)), child: child, )); } class SizeRoute extends PageRouteBuilder { final Widget page; SizeRoute(this.page) : super( pageBuilder: (context, animation, secondaryAnimation) => page, transitionDuration: Duration(milliseconds: 300), transitionsBuilder: (context, animation, secondaryAnimation, child) => // Align( // child: SizeTransition(child: child, sizeFactor: animation), // ), ScaleTransition( scale: Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: animation, curve: Curves.fastOutSlowIn)), child: child, ), ); }
通过页面跳转,iOS效果的跳转效果是CupertinoPageRoute,使用CupertinoPageRoute子类
// 通过裁剪去除页面的shadow
class MyCupertinoPageRoute<T> extends CupertinoPageRoute { MyCupertinoPageRoute({ required WidgetBuilder builder, RouteSettings? settings, }) : super(builder: builder, settings: settings); @override bool get barrierDismissible => true; @override Color? get barrierColor => ColorUtil.hexColor(0x000000, alpha: 0.2); @override // A relatively rigorous eyeball estimation. Duration get transitionDuration => const Duration(milliseconds: 450); @override Widget buildTransitions(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) { // 通过裁剪去除页面的shadow return ClipRRect( clipBehavior: Clip.hardEdge, child: super.buildTransitions(context, animation, secondaryAnimation, child), ); } }
实现settings.name的不同name对应不同的页面Route
class RouterManager { // ignore: missing_return static Route<dynamic> generateRoute(RouteSettings settings) { print("generateRoute: ${settings}, name:${settings.name}"); switch (settings.name) { case RouterName.home: { return NoAnimRouteBuilder(const MyHomePage( title: "home", )); } break; case RouterName.login: { return NoAnimRouteBuilder(const LoginPage( title: "LoginPage", )); } break; case RouterName.profilePage: { return MyCupertinoPageRoute( builder: (_) => PersonProfilePage( arguments: settings.arguments, // 传递的参数 ), ); } break; default: return NoAnimRouteBuilder(const MyHomePage( title: "home", )); } } }
return MaterialApp( theme: ThemeData( fontFamily: "PingFang SC", primarySwatch: themeModel.theme, ), debugShowCheckedModeBanner: false, supportedLocales: S.delegate.supportedLocales, locale: localeModel.getLocale(), // 设置route onGenerateRoute: RouterManager.generateRoute, navigatorObservers: buildObservers(), localizationsDelegates: const [ S.delegate, RefreshLocalizations.delegate, //下拉刷新 GlobalCupertinoLocalizations.delegate, GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate ], localeResolutionCallback: (_locale, supportedLocales) { if (localeModel.getLocale() != null) { //如果已经选定语言,则不跟随系统 return localeModel.getLocale(); } else { //跟随系统 print("_locale:${_locale}"); Locale locale; if (supportedLocales.contains(_locale)) { locale = _locale!; } else { //如果系统语言不是中文简体或美国英语,则默认使用美国英语 locale = Locale('en', 'US'); } return locale; } }, ); }
配置之后就可以使用了,使用的示例-路由页面跳转示例
// 进入个人信息
void enterMyProfilePage() {
dynamic obj = widget.arguments;
if (widget.arguments != null && widget.arguments is Map) {
NavigatorRoute.push(RouterName.profilePage, arguments: obj);
}
}
flutter开发实战-常用的路由Route配置,主要实现配置路由,PageRouteBuilder、MaterialApp中设置onGenerateRoute,最后使用NavigatorRoute.push进行页面跳转,页面传参数。
学习记录,每天不停进步。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。