Flutter中的路由
摘要：
路由是native中應用的比較多，特別是元件化的工程中，更是用來解耦的利器，比較常用的有阿里的ARouter等，路由這一思想也是借鑑前端而來，比如web中頁面跳轉就是一個url就到了一個新的頁面，Flutter既然是新一代的跨端方案，而且從RN借鑑了不少思想，路由當然也是必不可少的，本篇將瞭解...
路由是native中應用的比較多，特別是元件化的工程中，更是用來解耦的利器，比較常用的有阿里的ARouter等，路由這一思想也是借鑑前端而來，比如web中頁面跳轉就是一個url就到了一個新的頁面，Flutter既然是新一代的跨端方案，而且從RN借鑑了不少思想，路由當然也是必不可少的，本篇將瞭解下Flutter的路由
同步更新gitpageofollow,noindex">xsfelvis.github.io/2018/12/15/…
Flutter的路由
在Flutter中支援所有路由場景， push、pop頁面，頁面間的引數傳遞等等。flutter裡面的路由可以分成兩種，
- 一種是直接註冊，不能傳遞引數，可以稱 為靜態路由
- 一種要自己構造例項，可以傳遞引數，可以稱為 動態路由。
靜態路由
在建立時就已經明確知道了要跳轉的頁面和值， 在新建一個MD風格的App的時候，可以傳入一個routes引數來定義路由。但是這裡定義的路由是靜態的，它不可以向下一個頁面傳遞引數
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
//註冊路由表
routes: {
"router/static_page": (context) => StaticRoute(),
},
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
複製程式碼
通過routes這個屬性註冊好跳轉的頁面即key-value，上面的程式碼中
key：router/static_pagevalue: StaticRouter 然後使用的時候使用
FlatButton(
child: Text("open static router"),
textColor: Colors.blue,
onPressed: () {
Navigator.pushNamed(context, "router/static_page");
},
)
複製程式碼
動態路由
當需要向下一個頁面傳遞引數時，要用到所謂的動態路由，自己生成頁面物件，所以可以傳遞自己想要的引數。
FlatButton(
child: Text("open dynamic router"),
textColor: Colors.blue,
onPressed: () {
Navigator.push(context, MaterialPageRoute(
builder: (context) {
return new EchoRoute("傳入跳轉引數");
}));
或者
Navigator.of（(context).push(MaterialPageRoute(
builder: (context) {
return new EchoRoute("傳入跳轉引數");
}));
},
)
複製程式碼
點選返回
new RaisedButton(
child: new Text("點我返回"),
onPressed: () {
Navigator.of(context).pop();
},
color: Colors.blue,
highlightColor: Colors.lightBlue,
)
複製程式碼
我們可以在前一個頁面接受第二個頁面的返回值 在第一個頁面跳轉時候加上futrue來接收
FlatButton(
child: Text("open dynamic router"),
textColor: Colors.blue,
onPressed: () {
Future future = Navigator.push(context,
MaterialPageRoute(builder: (context) {
return new EchoRoute("傳入跳轉引數");
}));
//接收動態頁面返回時傳回的值
future.then((value) {
showDialog(
context: context,
child: new AlertDialog(
title: new Text(value),
));
});
},
複製程式碼
在EchoRoute頁面 返回時使用帶引數的pop方法
new RaisedButton(
child: new Text("點我返回"),
onPressed: () {
//Navigator.of(context).pop();
Navigator.of(context).pop("我是來自dymamic 關閉的返回值");
},
color: Colors.blue,
highlightColor: Colors.lightBlue,
)
複製程式碼
這樣就會在關閉EchoRoute回到跳轉前頁面時彈出dialog收到EchoRoute傳來的引數
小結
Navigator的職責是負責管理Route的，管理方式就是利用一個棧不停壓入彈出，當然也可以直接替換其中某一個Route。而Route作為一個管理單元，主要負責建立對應的介面，響應Navigator壓入路由和彈出路由
入棧：
- 使用Navigator.of(context).pushName(“path“)或者Navigator.pushName(context,“path“)可以進行靜態路由的跳轉前提是需要在route屬性裡面註冊
- 使用push(Route)可以進行態路由的跳轉，動態路由可以傳入未知資料
出棧
- 使用pop()可以進行路由的出棧並且可以傳遞引數
- 可以使用Future接收上個頁面返回的值。