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
下面记录一下本人常使用的路由设置。
一、配置router_manager
// 定义各个页面的路由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);
bool get barrierDismissible => true;
Color? get barrierColor => ColorUtil.hexColor(0x000000, alpha: 0.2);
// A relatively rigorous eyeball estimation.
Duration get transitionDuration => const Duration(milliseconds: 450);
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",
));
}
}
}
二、在入口main的MaterialApp使用router_manager
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进行页面跳转，页面传参数。
学习记录，每天不停进步。