從入門到精通：Flutter路由系統詳解

Flutter是一個開源的移動應用開發框架，由谷歌推出。Flutter的路由系統是管理應用程序導航的機制，同時也是使應用程序結構化的重要組成部分。在本文中，我們將從多個方面對Flutter路由系統進行詳解，包括路由的基本概念、路由類型、路由傳參、路由攔截及多級路由等內容。

一、基本概念

在Flutter中，我們可以使用Navigator對象來管理應用中的路由。Navigator可以視為一個棧，我們可以使用Navigator.push來將頁面壓入棧中，而Navigator.pop則可以將頁面從棧中彈出，從而實現頁面間的導航。每當我們打開一個新的頁面時，Flutter都會自動將該頁面推入導航器的棧中，而在頁面關閉時則會自動將該頁面從棧中彈出。導航器根據頁面在棧中的位置和先後順序來控制應用程序的導航，可以輕鬆地實現來回切換，返回上一層和跳轉到指定頁面等功能。

二、路由類型

在Flutter中，我們可以使用兩種不同的路由類型：命名路由和普通路由。

1、命名路由

命名路由是一種用指定名稱來管理頁面導航的路由類型。我們可以通過Navigator.pushNamed方法來打開一個命名路由，該方法會將名稱和參數一起傳遞給路由生成函數，生成目標頁面。而使用使用Navigator.popAndPushNamed方法則可以關閉當前頁面並打開一個指定的命名路由。以下是一個示例代碼：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyApp',
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/detail': (context) => DetailPage(),
      },
    );
  }
}

在上述代碼中，我們將應用的初始路由設置為’/’，並使用routes屬性來定義命名路由和生成頁面的函數。在HomePage頁面中，我們可以使用Navigator.pushNamed來打開DetailPage頁面：

Navigator.pushNamed(
    context, // 上下文對象
    '/detail', // 要前往的頁面名稱
    arguments: params, // 要傳遞的參數（可選）
);

而在DetailPage頁面中，則可以使用以下代碼來獲取傳遞過來的參數：

final params = ModalRoute.of(context).settings.arguments;

2、普通路由

普通路由是不使用命名規則來管理頁面導航的路由類型，我們可以使用以下代碼來打開一個普通路由：

Navigator.push(
    context, // 上下文對象
    MaterialPageRoute(builder: (context) => DetailPage()), // 生成目標頁面的函數
);

同樣的，我們也可以使用pop方法來關閉當前頁面：

Navigator.pop(context);

三、路由傳參

在Flutter中，我們可以使用路由傳參的方式來將數據從一個頁面傳遞到另一個頁面。以下是一個示例代碼：

Navigator.push(
    context, // 上下文對象
    MaterialPageRoute(builder: (context) => DetailPage(params)), // 傳遞參數的目標頁面
);

在這個例子中，我們將參數params傳遞給DetailPage頁面。而在DetailPage頁面中，則可以使用以下代碼來獲取傳遞過來的參數：

class DetailPage extends StatelessWidget {
  final params;
  DetailPage(this.params); // 接收傳遞過來的參數
}

四、路由攔截

在一些場景下，我們可能會需要對頁面跳轉進行控制或者攔截，比如需要驗證用戶登錄狀態或者進行頁面權限控制等。在Flutter中，我們可以使用Navigator.pushNamed方法中的onGenerateRoute屬性來實現路由攔截的功能。

以下是一個示例代碼：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyApp',
      initialRoute: '/',
      onGenerateRoute: (settings) {
        // 攔截該頁面的跳轉
        if (settings.name == '/detail') {
          return MaterialPageRoute(builder: (context) {
            return LoginPage();
          });
        }
      },
      routes: {
        '/': (context) => HomePage(),
        '/detail': (context) => DetailPage(),
      },
    );
  }
}

在這個代碼中，我們通過onGenerateRoute來攔截了具有’/detail’名稱的頁面跳轉，並將目標頁面設置為LoginPage。在LoginPage中，我們可以進行用戶登錄驗證後再返回攔截之前的頁面：

Navigator.maybePop(context); // 返回攔截之前的頁面

五、多級路由

在一些複雜的應用場景中，我們可能會需要實現多級頁面的導航，此時我們可以使用Navigator.push和Navigator.pop來進行多級路由的管理。

以下是一個示例代碼：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyApp',
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/detail': (context) => DetailPage(),
        '/detail/nested': (context) => NestedPage(),
      },
    );
  }
}

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Detail Page')),
      body: Column(
        children: [
          Text('Detail Page'),
          ElevatedButton(
            child: Text('go to nested'),
            onPressed: () {
              Navigator.pushNamed(context, '/detail/nested');
            },
          ),
        ],
      ),
    );
  }
}

class NestedPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Nested Page')),
      body: Column(
        children: [
          Text('Nested Page'),
          ElevatedButton(
            child: Text('go back'),
            onPressed: () {
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  }
}

在這個代碼中，我們使用Navigator.pushNamed來實現從DetailPage頁面跳轉到NestedPage頁面，並使用Navigator.pop來實現從NestedPage頁面返回DetailPage頁面。