當(dāng)一個(gè)Flutter項(xiàng)目的頁(yè)面多來(lái)以后，頁(yè)面跳來(lái)跳去的线梗，開(kāi)發(fā)者自己都會(huì)暈椰于，所以需要用一個(gè)集中、靈活的方式去管理項(xiàng)目中所有頁(yè)面的路由與導(dǎo)航仪搔。
通常我們是使用主頁(yè)(home）屬性設(shè)置應(yīng)用程序的默認(rèn)路由瘾婿，即Navigator.defaultRouteName或/路由上的組件。除非指定了初始路由（initialRoute）屬性烤咧，否則這是在應(yīng)用程序正常啟動(dòng)時(shí)首先顯示的路由偏陪。如果無(wú)法顯示初始路由（initialRoute）屬性的路由，它也是顯示的路由煮嫌。
還有一個(gè)使用頻率較低的在生成路由上（onGenerateRoute）屬性笛谦，是應(yīng)用程序?qū)Ш降矫酚蓵r(shí)使用的路由生成器回調(diào)。通過(guò)自定義回調(diào)昌阿，可以靈活配置“什么路由名稱導(dǎo)航到什么頁(yè)面組件”饥脑。
下面我們就可以通過(guò)主頁(yè)(home）屬性、初始路由（initialRoute）屬性和在生成路由上（onGenerateRoute）屬性來(lái)集中管理項(xiàng)目中的所有頁(yè)面跳轉(zhuǎn)懦冰。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(),
initialRoute: '/',
onGenerateRoute: _getRoute,
);
}
/// 路由（`Route`）是由導(dǎo)航器（`Navigator`）管理的條目的抽象類灶轰。
/// 路由設(shè)置（`RouteSettings`）類是一些可能在構(gòu)建路由時(shí)有用的數(shù)據(jù)。
Route<dynamic> _getRoute(RouteSettings settings) {
// RouteSettings.name屬性刷钢，路由的名稱（例如`/settings`）笋颤。
final String name = settings.name;
// 根路徑路由。
if (name == '/') {
// Material頁(yè)面路由（`MaterialPageRoute`）類内地，通過(guò)平臺(tái)自適應(yīng)轉(zhuǎn)換替換整個(gè)屏幕的模態(tài)路由伴澄。
// 對(duì)于Android赋除，頁(yè)面的入口轉(zhuǎn)換會(huì)向上滑動(dòng)頁(yè)面并淡入其中。退出轉(zhuǎn)換是相同的非凌，但方向相反举农。
// 在iOS上，頁(yè)面從右側(cè)滑入敞嗡，然后反向退出并蝗。當(dāng)另一頁(yè)進(jìn)入以覆蓋它時(shí)，頁(yè)面也會(huì)在視差中向左移動(dòng)秸妥。
return MaterialPageRoute(
// 設(shè)置屬性，此路由的設(shè)置沃粗。
settings: settings,
// 構(gòu)建者屬性粥惧，構(gòu)建路由的主要內(nèi)容。
builder: (BuildContext context) => MyHomePage(),
);
// 主頁(yè)面路由最盅。
} else if (name == '/home') {
return MaterialPageRoute(
settings: settings,
builder: (BuildContext context) =>
Scaffold(appBar: AppBar(title: Text('主頁(yè)面'))),
);
// 設(shè)置頁(yè)面路由突雪。
} else if (name == '/setting') {
return MaterialPageRoute(
settings: settings,
builder: (BuildContext context) =>
Scaffold(appBar: AppBar(title: Text('設(shè)置頁(yè)面'))),
);
} else {
return null;
}
}
}
然后附上上面代碼中的MyHomePage類代碼。
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo 主頁(yè)'),
),
body: ListView(
children: <Widget>[
RaisedButton(
onPressed: () {
// 使用命名路由導(dǎo)航到下一個(gè)屏幕涡贱。
Navigator.pushNamed(context, '/home');
},
child: Text('主頁(yè)面'),
),
RaisedButton(
onPressed: () {
// 使用命名路由導(dǎo)航到下一個(gè)屏幕咏删。
Navigator.pushNamed(context, '/setting');
},
child: Text('設(shè)置頁(yè)面'),
),
],
),
);
}
}
最后運(yùn)行項(xiàng)目，效果就是下面動(dòng)圖顯示的樣子问词。
集中管理路由與導(dǎo)航
