Flutter學習之Route跳轉及數據傳遞

前言

咱們知道移動應用頁面跳轉是很是重要的一部分，幾乎咱們的程序和用戶打交道的就是頁面，或者叫view，咱們Android基本都是Activity和Fragment。並且Flutter當中叫作Route，它就是與用戶打交道的頁面。本文詳細探索一下Flutter當中頁面之間是怎麼交互的。

Route相似Android中Activity，因此Flutter中的頁面跳轉相似Android中Activity之間跳轉，Intent攜帶傳遞的數據。

正文

頁面跳轉

咱們如今看看Flutter中是怎麼進行頁面交互的，也就是頁面之間的跳轉。

從上一個頁面A跳轉下一個頁面B，有兩種方式：

1. 經過Navigator.push()跳轉
2. 經過Navigator.pushName()跳轉

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

提示：經過Navigator.pushNamed()跳轉的，記住必定要註冊routeName！！！
提示：經過Navigator.pushNamed()跳轉的，記住必定要註冊routeName！！！
提示：經過Navigator.pushNamed()跳轉的，記住必定要註冊routeName！！！

重要的事情說三遍😏😏😏！！！

代碼以下：

//第一種：經過Navigator.push()跳轉，相似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);

頁面跳轉並攜帶數據

基於上面的兩種跳轉方式，對應有兩種

1. 經過Navigator.push()跳轉，將參數傳到B頁面的構造方法中，代碼以下：

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

2. 經過Navigator.pushNamed()跳轉，使用ModalRoute.of()或者MaterialApp（CupertinoApp）構造器中的onGenerateRouter()獲取參數，建議使用ModalRouter.of()。代碼以下：

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


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

返回上一個頁面並返回數據

從當前頁面B返回上一個頁面A回傳數據：

通常都是點擊B頁面某個控件，關閉當前頁面，把須要的數據回傳,相似Android中的SetResult(Result.ok,intent)

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

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

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

總結

這樣咱們就把Flutter當中最基礎的頁面跳轉，以及頁面之間數據交互講解完了，小夥伴能夠愉快的去作各類頁面交互啦😊😊😊。
實例源碼地址