快捷導(dǎo)航

Flutter路由的跳轉(zhuǎn)、動(dòng)畫(huà)和傳參詳解（最簡(jiǎn)單）

更新時(shí)間：2019年01月08日 10:09:51 作者：阿爾卑斯de秘密

這篇文章主要給大家介紹了關(guān)于Flutter路由的跳轉(zhuǎn)、動(dòng)畫(huà)和傳參的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

路由

做Android/iOS原生開(kāi)發(fā)的時(shí)候，要打開(kāi)一個(gè)新的頁(yè)面，你得知道你的目標(biāo)頁(yè)面對(duì)象，然后初始化一個(gè)Intent或者ViewController，再通過(guò)startActivity或者pushViewController來(lái)推出一個(gè)新的頁(yè)面，不能跟web一樣，直接丟一個(gè)鏈接地址就跳轉(zhuǎn)到新的頁(yè)面。當(dāng)然，可以自己去加一個(gè)中間層來(lái)實(shí)現(xiàn)這些功能。

Flutter里面是原生支持路由的。Flutter的framework提供了路由跳轉(zhuǎn)的實(shí)現(xiàn)。我們可以直接使用這些功能。

Flutter路由介紹

Flutter里面有路由支持所有的路由場(chǎng)景，push、pop頁(yè)面，頁(yè)面間的參數(shù)傳遞等等。flutter里面的路由可以分成兩種，一種是直接注冊(cè)，不能傳遞參數(shù)。另一種要自己構(gòu)造實(shí)例，可以傳遞參數(shù)。我們暫時(shí)把它們規(guī)為靜態(tài)路由和動(dòng)態(tài)路由。

跳轉(zhuǎn)

命名路由

在文件構(gòu)建時(shí)先設(shè)置路由參數(shù)：

new MaterialApp(
 // 代碼
 routes: {
 "secondPage":(BuildContext context)=>new SecondPage(),
 },
);

在需要做路由跳轉(zhuǎn)的時(shí)候直接使用：

Navigator.pushNamed(context, "secondPage");

構(gòu)建路由

Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
 return new SecondPage();
}))

區(qū)別

以上兩種路由的優(yōu)缺點(diǎn)十分明顯：

命名路由簡(jiǎn)明并且系統(tǒng)，但是不能傳參。
構(gòu)建路由可以傳參，但比較繁瑣。

動(dòng)畫(huà)

構(gòu)建動(dòng)畫(huà)

先在構(gòu)建一個(gè)動(dòng)畫(huà)效果，如：

static SlideTransition createTransition(
 Animation<double> animation, Widget child) {
 return new SlideTransition(
  position: new Tween<Offset>(
  begin: const Offset(1.0, 0.0),
  end: const Offset(0.0, 0.0),
 ).animate(animation),
  child: child,
 );
}

以上動(dòng)畫(huà)意思為跳轉(zhuǎn)時(shí)新頁(yè)面從右邊劃入，返回時(shí)向右邊劃出。

引入動(dòng)畫(huà)

Navigator.push<String>(
 context,
 new PageRouteBuilder(pageBuilder: (BuildContext context,
  Animation<double> animation,
  Animation<double> secondaryAnimation) {
  // 跳轉(zhuǎn)的路由對(duì)象
  return new Wechat();
 }, transitionsBuilder: (
 BuildContext context,
 Animation<double> animation,
 Animation<double> secondaryAnimation,
 Widget child,
 ) {
 return MyStatefulWidgetState
  .createTransition(animation, child);
 }))

傳參

跳轉(zhuǎn)時(shí)

傳

前面我們說(shuō)過(guò)，flutter的命名路由跳轉(zhuǎn)無(wú)法傳參。因此，我們只能使用構(gòu)建路由的方式傳參:

Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
 return new SecondPage(
 title:'此處為參數(shù)'，
 name:'此處為名字參數(shù)'
 );
}))

收

class SecondPage extends StatefulWidget {
 String title;
 String name;

 Wechat({
 Key key,
 this.title,
 this.name
 }) : super(key: key);

 @override
 State<StatefulWidget> createState() {
 return new MyStatefulWidgetState();
 }
}

返回時(shí)

傳

當(dāng)觸發(fā)路由返回的事件時(shí)，傳參是十分簡(jiǎn)單的。和跳轉(zhuǎn)時(shí)的方式一樣，甚至更簡(jiǎn)單，只需要：

Navigator.of(context).pop('這個(gè)是要返回給上一個(gè)頁(yè)面的數(shù)據(jù)');

收

但是，在接受返回時(shí)的數(shù)據(jù)需要改造前面觸發(fā)跳轉(zhuǎn)時(shí)的路由：

// 命名路由
Navigator.pushNamed<String>(context, "ThirdPage").then( (String value){
 //處理代碼
});
// 構(gòu)建路由
Navigator.push<String>(context, new MaterialPageRoute(builder: (BuildContext context){
 return new ThirdPage(title:"請(qǐng)輸入昵稱");
})).then( (String result){
 //處理代碼
});

以上就是Flutter路由的跳轉(zhuǎn)、動(dòng)畫(huà)以及傳參的相關(guān)方法，依葫蘆畫(huà)瓢即可輕松應(yīng)對(duì)。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: