Flutter 使用Navigator進行區域性跳轉頁面
阿新 • • 發佈：2020-05-27
> 老孟導讀：Navigator元件使用的頻率不是很高，但在一些場景下非常適用，比如區域性表單多頁填寫、底部導航一直存在，每個tab各自導航場景。
Navigator 是管理路由的控制元件，通常情況下直接使用`Navigator.of(context)`的方法來跳轉頁面，之所以可以直接使用`Navigator.of(context)`是因為在`WidgetsApp`中使用了此控制元件，應用程式的根控制元件通常是`MaterialApp`，`MaterialApp`包含`WidgetsApp`，所以可以直接使用Navigator的相關屬性。
Navigator用法非常簡單，如下：
```dart
Navigator(
initialRoute: '/',
onGenerateRoute: (RouteSettings settings) {
WidgetBuilder builder;
switch (settings.name) {
case 'home':
builder = (context) => PageA();
break;
case 'user':
builder = (context) => PageB();
break;
}
return MaterialPageRoute(builder: builder, settings: settings);
},
)
```
`initialRoute`表示初始化路由，`onGenerateRoute`表示根據**RouteSettings**生成路由。
那麼在什麼情況下需要使用Navigator？在需要區域性頁面跳轉的地方使用Navigator，如下面的場景：
## 頭條客戶端舉報場景
頭條客戶端每一個新聞下面都有一個“叉號”，點選彈出相關資訊，點選其中的區域性，會在當前小窗戶內跳轉到舉報頁面，效果如下：
此場景就是使用Navigator的典型場景，點選舉報，並不是全屏切換頁面，而是僅僅在當前彈出的頁面進行切換。
首頁程式碼如下：
```dart
@override
Widget build(BuildContext context) {
return Center(
child: Container(
height: 350,
width: 300,
child: Navigator(
initialRoute: '/',
onGenerateRoute: (RouteSettings settins) {
WidgetBuilder builder;
switch (settins.name) {
case '/':
builder = (context) => PageC();
break;
}
return MaterialPageRoute(builder: builder);
},
),
),
);
}
```
`Navigator`的初始化路由為**PageC**頁面，**PageC**頁面程式碼如下：
```dart
class PageC extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Card(
child: Column(
children: