這篇文章主要給大家介紹了關於Flutter學習教程之Route跳轉以及數據傳遞的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用Flutter具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧
前言
我們知道移動應用頁面跳轉是非常重要的一部分,幾乎我們的程序和用戶打交道的就是頁面,或者叫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);
頁面跳轉並攜帶數據
基於上面的兩種跳轉方式,對應有兩種
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當中最基礎的頁面跳轉,以及頁面之間數據交互講解完了,小夥伴可以愉快的去做各種頁面交互啦😊😊😊。
好了,以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對神馬文庫的支持。