這篇文章主要為大家展示了“Flutter路由中跳轉(zhuǎn)、動畫和傳參的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學習一下“Flutter路由中跳轉(zhuǎn)、動畫和傳參的示例分析”這篇文章吧。

創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、光明網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5頁面制作、購物商城網(wǎng)站建設(shè)、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為光明等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

路由

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

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

Flutter路由介紹

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

跳轉(zhuǎn)

命名路由

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

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

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

Navigator.pushNamed(context, "secondPage");

構(gòu)建路由

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

區(qū)別

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

• 命名路由簡明并且系統(tǒng)，但是不能傳參。

• 構(gòu)建路由可以傳參，但比較繁瑣。

動畫

構(gòu)建動畫

先在構(gòu)建一個動畫效果，如：

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,
 );
}

以上動畫意思為跳轉(zhuǎn)時新頁面從右邊劃入，返回時向右邊劃出。

引入動畫

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

傳參

跳轉(zhuǎn)時

傳

前面我們說過，flutter的命名路由跳轉(zhuǎn)無法傳參。因此，我們只能使用構(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();
 }
}

返回時

傳

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

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

收

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

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

以上是“Flutter路由中跳轉(zhuǎn)、動畫和傳參的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當前標題：Flutter路由中跳轉(zhuǎn)、動畫和傳參的示例分析-創(chuàng)新互聯(lián)
URL分享：http://www.chinadenli.net/article28/docojp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、定制開發(fā)、標簽優(yōu)化、網(wǎng)站策劃、網(wǎng)站設(shè)計、虛擬主機

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)