Flutter 中，一切皆 Widget !!!!

Remember: Screens are Just Widgets?.

今天來學習一下 Flutter 中常用的一些跳轉方式。在安卓中我們常用的跳轉是通過 Intent 跳轉到 新的頁面(Activity) 中，Intent 其實就可以簡單的等價于 一種路由。
跳轉的實現包括簡單的跳轉&返回；帶數據跳轉；跳轉后回傳數據等等，接下里我們就將這些場景適配到 Flutter 中。
在 Flutter 中，頁面跳轉需要用到路由 Navigator.

1.跳轉到新頁面并返回

摘自官網

1. Create two screens
2. Navigate to the second screen using Navigator.push
3. Return to the first screen using Navigator.pop

意思是跳轉到新頁面使用 Navigator.push() 方法，返回上個頁面使用 Navigator.pop() 方法

接下來就創建兩個簡單的頁面，TestScreen.dart, TestScreen2.dart兩個頁面

TestScreen.dart：class TestScreenState extends State<TestScreen> {@overrideWidget build(BuildContext context) {return new Scaffold(appBar: AppBar(title: Text("第一頁"),),body: Center(child: new GestureDetector(onTap: () {},child: Text("跳轉到第二個頁面"),),),);}} 

TestScreen2.dartclass TestScreen2State extends State<TestScreen2> {@overrideWidget build(BuildContext context) {return new Scaffold(appBar: AppBar(title: Text("第二頁"),),body: Center(child: new GestureDetector(onTap: () {},child: Text("我是第二個頁面"),),),);}} 

很簡單的兩個頁面，居中顯示一個 文本 控件。然后給他設置了手勢實現點擊事件。現在開始給第一個頁面添加點擊事件處理，直接調用 Navigator.push()方法，參數需要傳遞一個 Route 對象。Route 我們可以自己創建一個，也可以使用系統給我們提供的 MaterialPageRoute

如下：

onTap: () {Navigator.push(context,MaterialPageRoute(builder: (context) => TestScreen2()));}, 

現在我們在第二個頁面了，那么怎么回到第一個頁面呢？

此時需要調用 Navigator.pop(context) 即可回到上個頁面了~

2.傳遞數據到新頁面

簡單的通過實體類傳遞一組信息。

先創建一個實體類，此處建了一個 User 類保存了 name和 age 兩個字段信息

class User {final String name;final int age;User(this.name, this.age);} 

然后在第一個頁面中的點擊事件的時候創建一個 User 對象，并傳入 Screen2 的構造中

onTap: () {User xiaoming = new User("小明",25);Navigator.push(context,MaterialPageRoute(builder: (context) => TestScreen2(user: xiaoming)));}, 

Screen2 的處理

 class TestScreen2 extends StatelessWidget {final User user;const TestScreen2({Key key, this.user}) : super(key: key);@overrideWidget build(BuildContext context) {return new Scaffold(appBar: AppBar(title: Text("第二頁",style: shenshen(color: Colors.greenAccent),),),body: Center(child: new GestureDetector(onTap: () {Navigator.pop(context);},child: Text("傳過來的的 User name = ${[user.name](http://user.name)}, age = ${user.age}",style: TextStyle(fontSize: 28.0, color: Colors.redAccent),),),),);}} 

上邊的例子中是用 StagelessWidget 接收的參數，但是我們開發中用的最多的肯定是 StagefulFidget,那么該怎么處理呢？

其實也不難，也是通過構造函數的形式傳遞，但是傳遞過去之后，User是留存在 TestScreen2 這個 Class 中的，那么我們需要在 他的 TestScreenState 這個 Class 中使用，那么怎么用呢？只需要在 state 這個 Class 中，調用 widget.user 就能獲取 user對象了。簡單吧~

class TestScreen2 extends StatefulWidget {final User user;const TestScreen2({Key key, this.user}) : super(key: key);@overrideState<StatefulWidget> createState() => TestScreen2State();}class TestScreen2State extends State<TestScreen2> {@overrideWidget build(BuildContext context) {**var localUser = widget.user;**return new Scaffold(appBar: AppBar(title: Text("第二頁",style: TextStyle(color: Colors.greenAccent),),),body: Center(child: new GestureDetector(onTap: () {Navigator.pop(context);},child: Text("StatefulWidget：傳過來的的 User name = ${[localUser.name](http://localUser.name)}, age = ${localUser.age}",style: TextStyle(fontSize: 28.0, color: Colors.redAccent),),),),);}} 

3.新頁面傳遞數據給舊頁面

在 Android 開發中，我們可能會用到 startActivityForResult 等類似的方法實現，從 B 頁面 回到 A 頁面的時候帶回來一些數據，那么這種場景怎么在 Flutter 中實現呢？

當然了還是直接使用 Navigator.pop() 方法，第二個參數就是你傳遞回去數據啦~

然后在第一個頁面中，使用異步方式，調用的 push() 方法，就會獲取 傳遞過來的信息了

_startNewPageAndeGetReturnData(BuildContext context) async {User xiaoming = new User("小明", 25);final result = await Navigator.push(context,MaterialPageRoute(builder: (context) => TestScreen2(user: xiaoming)));print("這地方打印的是新頁面傳遞回來的信息："+[result.name](http://result.name) +" "+ result.age.toString());} 

4.共享動畫跳轉

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.juherenli.com/17591.html