前言

我們知道移動應(yīng)用頁面跳轉(zhuǎn)是非常重要的一部分，幾乎我們的程序和用戶打交道的就是頁面，或者叫view，我們Android基本都是Activity和Fragment。而且Flutter當(dāng)中叫做Route，它就是與用戶打交道的頁面。本文詳細(xì)探索一下Flutter當(dāng)中頁面之間是怎么交互的。

Route類似Android中Activity，所以Flutter中的頁面跳轉(zhuǎn)類似Android中Activity之間跳轉(zhuǎn)，Intent攜帶傳遞的數(shù)據(jù)。

正文

頁面跳轉(zhuǎn)

我們現(xiàn)在看看Flutter中是怎么進(jìn)行頁面交互的，也就是頁面之間的跳轉(zhuǎn)。

從上一個頁面A跳轉(zhuǎn)下一個頁面B，有兩種方式：

1. 通過Navigator.push()跳轉(zhuǎn)
2. 通過Navigator.pushName()跳轉(zhuǎn)

返回上一個頁面：Navigator.pop();

提示：通過Navigator.pushNamed()跳轉(zhuǎn)的，記住一定要注冊routeName?。。?br> 提示：通過Navigator.pushNamed()跳轉(zhuǎn)的，記住一定要注冊routeName?。?！
提示：通過Navigator.pushNamed()跳轉(zhuǎn)的，記住一定要注冊routeName！??！

重要的事情說三遍???????。?！

代碼如下：

//第一種：通過Navigator.push()跳轉(zhuǎn)，類似Android中的startActivity(),指定Activity類名這種方式;
    Navigator.push(context, MaterialPageRoute(builder: (context) {
                  return ThirdRoute();
                }));
                 
//第二種方式：通過Navigator.pushName()，類似Android中的startActivity(),指定class全路徑這種方式；
//先在MaterialApp里面注冊Route
routes: { SecondRoute.routeName: (context) => SecondRoute(),}

Navigator.pushNamed(context, SecondRoute.routeName);

//返回上一個頁面，類似Activity的finish()；
Navigator.pop(context);

頁面跳轉(zhuǎn)并攜帶數(shù)據(jù)

基于上面的兩種跳轉(zhuǎn)方式，對應(yīng)有兩種

1. 通過Navigator.push()跳轉(zhuǎn)，將參數(shù)傳到B頁面的構(gòu)造方法中，代碼如下：

   //A頁面跳轉(zhuǎn),直接將參數(shù)傳到B頁面的構(gòu)造方法里面
    Navigator.push(context,
                  MaterialPageRoute(
                    builder:(context) => BRouter(string)
   ))
   //BRouter構(gòu)造方法
     class BRouter extends StatelessWidget{
       final String str;
       BRouter(this.str);
     }
   
   

2. 通過Navigator.pushNamed()跳轉(zhuǎn)，使用ModalRoute.of()或者MaterialApp（CupertinoApp）構(gòu)造器中的onGenerateRouter()獲取參數(shù)，建議使用ModalRouter.of()。代碼如下：

//A頁面跳轉(zhuǎn),arguments就是需要傳遞的數(shù)據(jù)，這里的arguments是一個可需參數(shù)
Navigator.pushName(context,routerName,arguments);
//B頁面提取參數(shù),傳的是什么類型，就用什么類型接值，這里用String演示
//第一種用ModalRouter接值
String arg = ModalRouter.of(context).setting.arguments;


//第二種在onGenerateRouter里面接值
MaterialApp(
  onGenerateRoute: (settings) {
    // 先根據(jù)setting里面的name判斷是哪個Router
    if (settings.name == PassArgumentsScreen.routeName) {
      // 然后取出setting里面的arguments
      final ScreenArguments args = settings.arguments;
      // 然后再通過具體Router的構(gòu)造方法穿過，類似上面的第一種方式接值方式
      return MaterialPageRoute(
        builder: (context) {
          return PassArgumentsScreen(
            title: args.title,
          );
        },
      );
    }
  },
);

返回上一個頁面并返回數(shù)據(jù)

從當(dāng)前頁面B返回上一個頁面A回傳數(shù)據(jù)：

一般都是點(diǎn)擊B頁面某個控件，關(guān)閉當(dāng)前頁面，把需要的數(shù)據(jù)回傳,類似Android中的SetResult(Result.ok,intent)

//當(dāng)前頁面B中的按鈕
RaisedButton(
  onPressed: () {
    // 點(diǎn)擊button，關(guān)閉頁面，回到上一個頁面，回傳數(shù)據(jù)
    Navigator.pop(context, '回傳的數(shù)據(jù)');
    // 這個方法通過方法名也能看出來，關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到具體的頁面，也可以回傳數(shù)據(jù)。
    // tips：參數(shù)加[]說明是非必傳參數(shù)
    Navigator.popAndPushNamed(context, routeName，[T result])
  },
  child: Text('返回'),
);

//回到上一個頁面A，需要接值的話，在點(diǎn)擊去下一個頁面的需要使用到async延遲接收
//當(dāng)BuildContext在Scaffold之前時，調(diào)用Scaffold.of(context)會報錯。所以這里通過Builder Widget來解決
Builder(builder: (context){
              return RaisedButton(
                onPressed: () async {
                  //2: 通過Navigator.push方式攜帶跳轉(zhuǎn)
                  String str = "我是第一個頁面的數(shù)據(jù)";
                  //疑問為什么只能用var接值，不能用String？
                  var result = await Navigator.pushNamed(context, SecondRoute.routeName,
                      arguments: str);
                  if (result != null) {
                    //通過snackBar將接收到的數(shù)據(jù)show出來。
                    Scaffold.of(context).showSnackBar(SnackBar(
                      content: Text(result),
                      backgroundColor: Colors.blue,
                      duration: Duration(milliseconds: 500),
                    ));
                  }
                },
                child: Text("攜帶數(shù)據(jù)跳轉(zhuǎn)"),
              );
            }),

下面我們來看看最終的演示效果：

Route跳轉(zhuǎn)演示

總結(jié)

這樣我們就把Flutter當(dāng)中最基礎(chǔ)的頁面跳轉(zhuǎn)，以及頁面之間數(shù)據(jù)交互講解完了，小伙伴可以愉快的去做各種頁面交互啦??????。
實(shí)例源碼地址