前言
我們知道移動應用頁面跳轉是非常重要的一部分,幾乎我們的程式和使用者打交道的就是頁面,或者叫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當中最基礎的頁面跳轉,以及頁面之間資料互動講解完了,小夥伴可以愉快的去做各種頁面互動啦???。