flutter開發(fā)實(shí)戰(zhàn)-常用的路由Route配置
路由（Route）在移動(dòng)開發(fā)中通常指頁面（Page），這跟 Web 開發(fā)中單頁應(yīng)用的 Route 概念意義是相同的，Route 在 Android中 通常指一個(gè) Activity，在 iOS 中指一個(gè) ViewController。所謂路由管理，就是管理頁面之間如何跳轉(zhuǎn)，通常也可被稱為導(dǎo)航管理。Flutter 中的路由管理和原生開發(fā)類似，無論是 Android 還是 iOS，導(dǎo)航管理都會維護(hù)一個(gè)路由棧，路由入棧（push）操作對應(yīng)打開一個(gè)新頁面，路由出棧（pop）操作對應(yīng)頁面關(guān)閉操作，而路由管理主要是指如何來管理路由棧。
這段來自：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
下面記錄一下本人常使用的路由設(shè)置。
一、配置router_manager
// 定義各個(gè)頁面的路由name
class RouterName {
// 隱私統(tǒng)一
static const String agreement = 'agreement';
// 啟動(dòng)頁廣告
static const String splash = 'splash';
// tab
static const String tab = '/';
// 用戶profile
static const String profilePage = 'profilePage';
}
通過頁面跳轉(zhuǎn)，經(jīng)常使用的是PageRouteBuilder，這里自定義幾個(gè)常用的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,
),
);
}
通過頁面跳轉(zhuǎn)，iOS效果的跳轉(zhuǎn)效果是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),
);
}
}
實(shí)現(xiàn)settings.name的不同name對應(yīng)不同的頁面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, // 傳遞的參數(shù)
),
);
}
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(),
// 設(shè)置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) {
//如果已經(jīng)選定語言，則不跟隨系統(tǒng)
return localeModel.getLocale();
} else {
//跟隨系統(tǒng)
print("_locale：${_locale}");
Locale locale;
if (supportedLocales.contains(_locale)) {
locale = _locale!;
} else {
//如果系統(tǒng)語言不是中文簡體或美國英語，則默認(rèn)使用美國英語
locale = Locale('en', 'US');
}
return locale;
}
},
);
}
三、路由頁面跳轉(zhuǎn)
配置之后就可以使用了，使用的示例-路由頁面跳轉(zhuǎn)示例
// 進(jìn)入個(gè)人信息
void enterMyProfilePage() {
dynamic obj = widget.arguments;
if (widget.arguments != null && widget.arguments is Map) {
NavigatorRoute.push(RouterName.profilePage, arguments: obj);
}
}
四、小結(jié)
flutter開發(fā)實(shí)戰(zhàn)-常用的路由Route配置，主要實(shí)現(xiàn)配置路由，PageRouteBuilder、MaterialApp中設(shè)置onGenerateRoute，最后使用NavigatorRoute.push進(jìn)行頁面跳轉(zhuǎn)，頁面?zhèn)鲄?shù)。文章來源：http://www.zghlxwxcb.cn/news/detail-545049.html
學(xué)習(xí)記錄，每天不停進(jìn)步。文章來源地址http://www.zghlxwxcb.cn/news/detail-545049.html
到了這里，關(guān)于flutter開發(fā)實(shí)戰(zhàn)-常用的路由Route配置的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
