前言
我們知道移動應用頁面跳轉是非常重要的一部分，幾乎我們的程序和用戶打交道的就是頁面，或者叫view，我們Android基本都是Activity和Fragment。而且Flutter當中叫做Route，它就是與用戶打交道的頁面。本文詳細探索一下Flutter當中頁面之間是怎么交互的。
Route類似Android中Activity，所以Flutter中的頁面跳轉類似Android中Activity之間跳轉，Intent攜帶傳遞的數據。
正文
頁面跳轉
我們現在看看Flutter中是怎么進行頁面交互的，也就是頁面之間的跳轉。
從上一個頁面A跳轉下一個頁面B，有兩種方式：
- 通過Navigator.push()跳轉
- 通過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);
頁面跳轉并攜帶數據
基于上面的兩種跳轉方式，對應有兩種
-
通過Navigator.push()跳轉，將參數傳到B頁面的構造方法中，代碼如下：
//A頁面跳轉,直接將參數傳到B頁面的構造方法里面 Navigator.push(context, MaterialPageRoute( builder:(context) => BRouter(string) )) //BRouter構造方法 class BRouter extends StatelessWidget{ final String str; BRouter(this.str); } 通過
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當中最基礎的頁面跳轉，以及頁面之間數據交互講解完了，小伙伴可以愉快的去做各種頁面交互啦??????。
實例源碼地址
