image
本文要介紹的知識點
- 用路由推出一個新頁面
- 打開新頁面時，傳入參數
- 參數的回傳
路由
做Android/iOS原生開發的時候，要打開一個新的頁面，你得知道你的目標頁面對象，然后初始化一個Intent或者ViewController，再通過startActivity或者pushViewController來推出一個新的頁面，不能跟web一樣，直接丟一個鏈接地址就跳轉到新的頁面。當然，可以自己去加一個中間層來實現這些功能。
Flutter里面是原生支持路由的。Flutter的framework提供了路由跳轉的實現。我們可以直接使用這些功能。
Flutter路由介紹
Flutter里面有路由支持所有的路由場景，push、pop頁面，頁面間的參數傳遞等等。flutter里面的路由可以分成兩種，一種是直接注冊，不能傳遞參數。另一種要自己構造實例，可以傳遞參數。我們暫時把它們規為靜態路由和動態路由。
靜態路由的注冊
在新建一個MD風格的App的時候，可以傳入一個routes參數來定義路由。但是這里定義的路由是靜態的，它不可以向下一個頁面傳遞參數。
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter實例'),
routes: <String, WidgetBuilder> {
// 這里可以定義靜態路由，不能傳遞參數
'/router/second': (_) => new SecondPage(),
'/router/home': (_) => new RouterHomePage(),
},
);
靜態路由的使用
push一個新頁面,pushNamed方法是有一個Future的返回值的，所以靜態路由也是可以接收下一個頁面的返回值的。但是不能向下一個頁面傳遞參數。
Navigator.of(context).pushNamed('/router/second');
// 帶返回值
Navigator.of(context).pushNamed('/router/second').then((value) {
// dialog顯示返回值
_showDialog(context, value);
})
pop回上一個頁面
Navigator.of(context).pop('這個是要返回給上一個頁面的數據');
動態路由的使用
當需要向下一個頁面傳遞參數時，要用到所謂的動態路由，自己生成頁面對象，所以可以傳遞自己想要的參數。
Navigator.of(context).push(new MaterialPageRoute(builder: (_) {
return new SecondPage(title: '路由是個好東西，要進一步封裝');
}));
也可以用PageRouterBuilder來自定義打開動畫
Navigator.of(context).push(new PageRouteBuilder(pageBuilder:
(BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation) {
return new RefreshIndicatorDemo();
}, transitionsBuilder: (
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child,
) {
// 添加一個平移動畫
return BRouter.createTransition(animation, child);
}));
平移的變換
/// 創建一個平移變換
/// 跳轉過去查看源代碼，可以看到有各種各樣定義好的變換
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, // child is the value returned by pageBuilder
);
}
關于學習
flutter的學習文章都整理在這個github倉庫里
