Flutter代碼錦囊---集中管理路由與導航

當一個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('設置頁面'),
          ),
        ],
      ),
    );
  }
}

最後運行項目，效果就是下面動圖顯示的樣子。