Flutter 中，一切皆 Widget !!!!

Remember: Screens are Just Widgets?.

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

1.跳轉(zhuǎn)到新頁面并返回

摘自官網(wǎng)

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

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

接下來就創(chuàng)建兩個簡單的頁面，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("跳轉(zhuǎn)到第二個頁面"),),),);}} 

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("我是第二個頁面"),),),);}} 

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

如下：

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

現(xiàn)在我們在第二個頁面了，那么怎么回到第一個頁面呢？

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

2.傳遞數(shù)據(jù)到新頁面

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

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

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

然后在第一個頁面中的點擊事件的時候創(chuàng)建一個 User 對象，并傳入 Screen2 的構(gòu)造中

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 接收的參數(shù)，但是我們開發(fā)中用的最多的肯定是 StagefulFidget,那么該怎么處理呢？

其實也不難，也是通過構(gòu)造函數(shù)的形式傳遞，但是傳遞過去之后，User是留存在 TestScreen2 這個 Class 中的，那么我們需要在 他的 TestScreenState 這個 Class 中使用，那么怎么用呢？只需要在 state 這個 Class 中，調(diào)用 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.新頁面?zhèn)鬟f數(shù)據(jù)給舊頁面

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

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

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

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

4.共享動畫跳轉(zhuǎn)

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請及時與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會在5工作日內(nèi)聯(lián)系您，一經(jīng)查實，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://www.junxiaosheng.cn/17591.html