flutter系列之:Navigator的進階用法

簡介

上篇文章我們講到了flutter中navigator的基本用法，我們可以使用它的push和pop方法來進行Router之間的跳轉。

在flutter中一個Router就是一個widget，但是在Android中，一個Router就是Activity,在IOS中，一個Router是一個ViewController。

Router除了之前講過的push和pop方法之外，還有一些更加進階的用法，一起來看看吧。

named routes

雖然在flutter中navigator将routers以stack的形式進行存儲，能做的也隻是push和pop操作，但是事實上Router是可以有名字的。

想想也是，如果Router沒有名字的話，那麼如何順利進行跳轉呢？不可能每次都new一個Router出來吧。

navigator有一個方法叫做Navigator.pushNamed()用來将帶名字的Router壓入堆棧，我們來看下它的定義：

static Future<T?> pushNamed<T extends Object?>(
    BuildContext context,
    String routeName, {
    Object? arguments,
  }) {
    return Navigator.of(context).pushNamed<T>(routeName, arguments: arguments);
  }
           

這個方法需要傳入一個context和對應的routeName，同時還可以帶一些參數。

那麼怎麼用這個方法呢？

首先我們需要定義一些Router，比如說在建立MaterialApp的時候可以傳入routes參數，來設定named Routers：

MaterialApp(
  title: '這是named Routers',
  initialRoute: '/firstPage',
  routes: {
    '/firstPage': (context) => const FirstPage(),
    '/secondPage': (context) => const SecondPage(),
  },
)
           

上面的代碼中我們分别定了兩個routers，分别是firstPage和secondPage,他們分别對應一個自定義的widget。

定義好Router之後，我們就可以向下面這樣使用了：

onPressed: () {
  Navigator.pushNamed(context, '/secondPage');
}
           

如果要傳回第一個頁面的話，那麼可以調用Navigator.pop方法來實作：

onPressed: () {
  Navigator.pop(context);
}
           

給named route傳參數

在上一節我們講到pushNamed的時候，還介紹了它還可以接收參數arguments。從定義上可以看到arguments的類型是Object對象，也就是說任何對象都可以作為named route的參數。

那麼我們先定義一個對象如下：

class TestArguments {
  final String name;
  final String description;

  TestArguments(this.name, this.description);
}
           

接下來我們需要建立一個能夠接受這個參數的Routers。

因為所有的Routers都是Widget，是以我們需要建立一個Widget,并在這個widget内部接收傳入的參數。

在flutter中有兩種傳遞參數的方式，你可以使用ModalRoute.of()，也可以使用onGenerateRoute()。

我們先來看下ModalRoute.of的定義：

static ModalRoute<T>? of<T extends Object?>(BuildContext context) {
    final _ModalScopeStatus? widget = context.dependOnInheritedWidgetOfExactType<_ModalScopeStatus>();
    return widget?.route as ModalRoute<T>?;
  }
           

它接收一個context參數，然後傳回一個route對象。

具體的用法如下：

class FirstPage extends StatelessWidget {
  const FirstPage({super.key});

  static const routeName = '/firstPage';

  @override
  Widget build(BuildContext context) {

    final args = ModalRoute.of(context)!.settings.arguments as TestArguments;

    return Scaffold(
      appBar: AppBar(
        title: Text(args.name),
      ),
      body: Center(
        child: Text(args.description),
      ),
    );
  }
}
           

除了使用ModalRoute之外，還可以在onGenerateRoute()方法中進行參數傳遞。onGenerateRoute是在Route生成的時候觸發的：

MaterialApp(

  onGenerateRoute: (settings) {

    if (settings.name == FirstPage.routeName) {

      final args = settings.arguments as TestArguments;

      return MaterialPageRoute(
        builder: (context) {
          return TestArguments(
            title: args.title,
            message: args.message,
          );
        },
      );
    }
    return null;
  },
)
           

onGenerateRoute接收一個settings對象，我們需要在settings對象中設定對應的name和arguments屬性。是以我們需要這樣調用：

Navigator.pushNamed(
      context,
      FirstPage.routeName,
      arguments: TestArguments(
        '測試',
        '這是一個named Route',
      ),
    );
           

從Screen傳回值

有時候我們需要從一個Screen傳回到之前的Screen，并且不是簡單的傳回，我們還希望知道前一個screen傳回了什麼結果，然後可以根據前一個screen傳回的不同結果來進行不同的處理。

這個時候就需要用到Navigator.pop的傳參功能了。

比如我們在第一個頁面中點選了按鈕，跳轉到第二個頁面：

final result = await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const SecondScreen()),
    );
           

這裡我們使用到了Navigator.push方法，并且傳回了一個result的值。

我們可以使用這個值來進行一些邏輯判斷。

那麼這個result的值是哪裡傳遞過來的呢？

沒錯，就是SecondScreen中的Navigator.pop方法：

Navigator.pop(context, 'Yes');
           

這裡的’Yes’就會傳遞給result供我們進行邏輯判斷。

向Screen傳值

有時候我們需要在頁面跳轉的過程中傳遞一些參數，那麼怎麼才能實作Screen之間的參數傳遞呢？

因為在flutter中所有的Routers都是Widget，是以我們可以在跳轉到新的頁面的時候直接将參數以構造函數的方式傳遞給Routers Widget。

比如我們有下面的Screen Widget：

class NameScreen extends StatelessWidget {

  const NameScreen({super.key, required this.name});

  final String name;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('NameScreen'),
      ),

      body: 
      ...
      ;
  }
}
           

想要傳值給它，可以在onTap方法中這樣寫：

onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => NameScreen(name: 'what is your name?'),
          ),
        );
           

總結

以上就是Navigator的更加進階的用法，我們可以通過Navigator來進行資料傳遞等操作，進而實作更加複雜的頁面功能。