Flutter路由的跳轉、動畫與傳參
摘要：
在檔案構建時先設定路由引數：
new MaterialApp(
// 程式碼
routes: {
"secondPage":(BuildContext context)=>new SecondPage(),
},
);
複製程式碼
在需要做路由...
在檔案構建時先設定路由引數：
new MaterialApp(
// 程式碼
routes: {
"secondPage":(BuildContext context)=>new SecondPage(),
},
);
複製程式碼
在需要做路由跳轉的時候直接使用：
Navigator.pushNamed(context, "secondPage"); 複製程式碼
構建路由
Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
return new SecondPage();
}))
複製程式碼
區別
以上兩種路由的優缺點十分明顯：
- 命名路由簡明並且系統，但是不能傳參。
- 構建路由可以傳參，但比較繁瑣。
動畫
構建動畫
先在構建一個動畫效果，如：
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,
);
}
複製程式碼
以上動畫意思為跳轉時新頁面從右邊劃入，返回時向右邊劃出。
引入動畫
Navigator.push<String>(
context,
new PageRouteBuilder(pageBuilder: (BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation) {
// 跳轉的路由物件
return new Wechat();
}, transitionsBuilder: (
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child,
) {
return MyStatefulWidgetState
.createTransition(animation, child);
}))
複製程式碼
傳參
跳轉時
傳
前面我們說過，flutter的命名路由跳轉無法傳參。因此，我們只能使用構建路由的方式傳參:
Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){
return new SecondPage(
title:'此處為引數'，
name:'此處為名字引數'
);
}))
複製程式碼
收
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();
}
}
複製程式碼
返回時
傳
當觸發路由返回的事件時，傳參是十分簡單的。和跳轉時的方式一樣，甚至更簡單，只需要：
Navigator.of(context).pop('這個是要返回給上一個頁面的資料');
複製程式碼
收
但是，在接受返回時的資料需要改造前面觸發跳轉時的路由：
// 命名路由
Navigator.pushNamed<String>(context, "ThirdPage").then( (String value){
//處理程式碼
});
// 構建路由
Navigator.push<String>(context, new MaterialPageRoute(builder: (BuildContext context){
return new ThirdPage(title:"請輸入暱稱");
})).then( (String result){
//處理程式碼
});
複製程式碼
以上就是Flutter路由的跳轉、動畫以及傳參的相關方法，依葫蘆畫瓢即可輕鬆應對。