當一個Flutter項目的頁面多來以后，頁面跳來跳去的，開發者自己都會暈，所以需要用一個集中、靈活的方式去管理項目中所有頁面的路由與導航。
通常我們是使用主頁(home）屬性設置應用程序的默認路由，即Navigator.defaultRouteName或/路由上的組件。除非指定了初始路由（initialRoute）屬性，否則這是在應用程序正常啟動時首先顯示的路由。如果無法顯示初始路由（initialRoute）屬性的路由，它也是顯示的路由。
還有一個使用頻率較低的在生成路由上（onGenerateRoute）屬性，是應用程序導航到命名路由時使用的路由生成器回調。通過自定義回調，可以靈活配置“什么路由名稱導航到什么頁面組件”。
下面我們就可以通過主頁(home）屬性、初始路由（initialRoute）屬性和在生成路由上（onGenerateRoute）屬性來集中管理項目中的所有頁面跳轉。
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`）是由導航器（`Navigator`）管理的條目的抽象類。
/// 路由設置（`RouteSettings`）類是一些可能在構建路由時有用的數據。
Route<dynamic> _getRoute(RouteSettings settings) {
// RouteSettings.name屬性，路由的名稱（例如`/settings`）。
final String name = settings.name;
// 根路徑路由。
if (name == '/') {
// Material頁面路由（`MaterialPageRoute`）類，通過平臺自適應轉換替換整個屏幕的模態路由。
// 對于Android，頁面的入口轉換會向上滑動頁面并淡入其中。退出轉換是相同的，但方向相反。
// 在iOS上，頁面從右側滑入，然后反向退出。當另一頁進入以覆蓋它時，頁面也會在視差中向左移動。
return MaterialPageRoute(
// 設置屬性，此路由的設置。
settings: settings,
// 構建者屬性，構建路由的主要內容。
builder: (BuildContext context) => MyHomePage(),
);
// 主頁面路由。
} else if (name == '/home') {
return MaterialPageRoute(
settings: settings,
builder: (BuildContext context) =>
Scaffold(appBar: AppBar(title: Text('主頁面'))),
);
// 設置頁面路由。
} else if (name == '/setting') {
return MaterialPageRoute(
settings: settings,
builder: (BuildContext context) =>
Scaffold(appBar: AppBar(title: Text('設置頁面'))),
);
} 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 主頁'),
),
body: ListView(
children: <Widget>[
RaisedButton(
onPressed: () {
// 使用命名路由導航到下一個屏幕。
Navigator.pushNamed(context, '/home');
},
child: Text('主頁面'),
),
RaisedButton(
onPressed: () {
// 使用命名路由導航到下一個屏幕。
Navigator.pushNamed(context, '/setting');
},
child: Text('設置頁面'),
),
],
),
);
}
}
最后運行項目，效果就是下面動圖顯示的樣子。
集中管理路由與導航
