版權聲明：本文為博主原創文章，未經博主允許不得轉載。
http://www.lxweimin.com/p/f79bf0fb213c
轉載請標明出處：
http://www.lxweimin.com/p/f79bf0fb213c
本文出自 AWeiLoveAndroid的博客
Flutter系列博文鏈接 ↓：
工具安裝：
Flutter基礎篇：
- 谷歌Flutter1.0正式版發布
- Flutter基礎篇（1）-- 跨平臺開發框架和工具集錦
- Flutter基礎篇（2）-- 老司機用一篇博客帶你快速熟悉Dart語法
- Flutter基礎篇（3）-- Flutter基礎全面詳解
- Flutter基礎篇（4）-- Flutter填坑全面總結
- Flutter基礎篇（5）-- Flutter代碼模板，解放雙手，提高開發效率必備
- Flutter基礎篇（6）-- 水平和垂直布局詳解
- Flutter基礎篇（7）-- Flutter更新錯誤全面解決方案(圖文+視頻講解)
- Flutter基礎篇（8）-- Flutter for Web詳細介紹
- Flutter基礎篇（9）-- 手把手教你用Flutter實現Web頁面編寫
- Flutter1.9升級體驗總結（Flutter Web 1.9最新版本填坑指南）
Flutter進階篇：
Dart語法系列博文鏈接 ↓：
Dart語法基礎篇：
Dart語法進階篇：
最近對路由做了封裝，寫了一個輕量級框架，讓你輕松地使用路由，不再那么麻煩。任何頁面都可以用，真的是方便快捷。已經傳到了github，歡迎朋友們給個star，感謝大家，希望能在幫助大家的同時，麻煩大家給個打賞買口水喝，謝謝大家。
開源倉庫地址：https://github.com/AweiLoveAndroid/Flutter-learning/blob/master/FRouter/
一、目前路由使用中存在的問題
發送位置比較零散
接收也不太好維護
頁面冗余代碼比較多
二、FRouter輕量級路由框架的思路
針對以上路由存在的問題，我對路由做了一個封裝，解決了路由存在的一些問題，把發送和接收路由做了統一處理，并且對不同的頁面需求做了適應，讓代碼維護變得更間接明了，無論是在哪個頁面都可以直接用
FRouter操作路由了。
三、代碼思路分析
首先針對不同的頁面，做了適配處理，
1.是否為首頁，如果是，就使用 MaterialApp + Scaffold + AppBar組合，最后只需要傳入對應的參數就可以輕松實現這個組合了，去掉了大量冗余重復代碼，如果不是首頁，就用Scaffold + AppBar組合。
2.是否有AppBar，如果有就用Scaffold + AppBar組合，如果沒有就用自己傳入的 child屬性（自己寫的頁面，沒有標題欄的頁面）。
3.路由管理統一使用FRouter類進行管理。
比如下面的示例代碼，我這個MainPage是首頁，我是用 FRouter(isFirstPage: true,...)，這就表示當我創建FRouter這個類對象的時候，實際上就創建了MaterialApp + Scaffold + AppBar組合，這就是標準的首頁的組件組合的方式，省去了一大堆沒用的代碼，當然我這里面也封裝了很多其他的屬性，你可以根據需要傳入即可，這里不逐個演示了。這里的isShowAppBar: true,屬性表示顯示AppBar組件。
routers屬性表示使用命名路由時，需要設置的路由管理的一個Map集合，child屬性就是我們自己的頁面內容了，比如這里使用一個RaisedButton按鈕，我點擊它發送路由，我可以使用 FRouter.sendRouter(context, '/pageone'); 命名路由，這里的/pageone就是命名路由的名稱，對應著routers集合的key。如果只是發一個普通的路由，沒必要這么麻煩，直接使用 FRouter.sendRouterPage(context, PageOne()); 即可，這里的PageOne()是我們要發送的目標頁面。
發送數據：這里的'/pagetwo': (builder) => PageTwo('數據2'),，實際上是給頁面PageTwo發送了一個String類型的字符串過去了，在PageTwo的構造函數里面有一個String類型的字段，當然你也可以根據實際需要，給你的頁面的構造函數的參數設置其他的參數類型，這里只是以String類做了一個示例。
// 使用示例代碼
class MainPage extends StatefulWidget {
@override
MainPageState createState() => new MainPageState();
}
class MainPageState extends State<MainPage> {
@override
Widget build(BuildContext context) {
// 首頁 isFirstPage: true,
return FRouter(
isFirstPage: true,
isShowAppBar: true,
routes: {
// 不傳遞數據
'/pageone': (builder) => PageOne(),
// 傳遞數據給PageTwo這個頁面
'/pagetwo': (builder) => PageTwo('數據2'),
'/pagethree': (builder) => PageThree('數據3'),
},
appBarTitle: Text('Hello World'),
child: RaisedButton(
onPressed: () {
// 命名路由
FRouter.sendRouter(context, '/pageone');
// 發送路由到新頁面
// FRouter.sendRouterPage(context, PageOne('data'));
},
child: Text('點擊進行跳轉'),
),
);
}
}
4.接下來看看目標頁面的處理。
PageOne 頁面構建的時候，同樣使用FRouter，這里需要注意的是，它不是首頁，所以不需要設置isFirstPage屬性（默認就是false 非首頁），我點擊按鈕返回上個頁面的時候，使用FRouter.backPageRouter(context);即可。是不是很方便，全部都用的是 FRouter來統一管理。
class PageOne extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 非首頁 isFirstPage: false, 默認就是非首頁
return FRouter(
isShowAppBar: true,
appBarTitle: Text(),
child: RaisedButton(
onPressed: () {
// 返回到上個頁面
FRouter.backPageRouter(context);
},
child: Text('點擊進行跳轉'),
),
);
}
}
PageTwo 頁面構建的時候，同樣使用FRouter，這里需要注意的是，這個頁面顯示AppBar，所以可以設置isShowAppBar:true屬性（默認就是true 顯示，如果需要顯示AppBar，那么這個屬性可寫可不寫），我點擊按鈕返回上個頁面的時候，要傳遞一個數據給上個頁面可以，使用FRouter.backPageRouter(context,'返回給上個頁面的數據');即可，參數2是我們需要傳遞的數據，可以是基本類型，也可以是一個對象，實體類等類型。
class PageTwo extends StatelessWidget {
String data;
PageTwo(this.data);
@override
Widget build(BuildContext context) {
return FRouter(
isShowAppBar: true,
appBarTitle: Text('PageTwo'),
child: RaisedButton(
onPressed: () {
// 返回數據給上個頁面
FRouter.backPageRouter(context,'返回給上個頁面的數據');
},
child: Text('點擊進行跳轉'),
),
);
}
}
PageThree 這里面做了一點變化：isShowAppBar: false,，表示不顯示 AppBar，那么這時候就不會顯示AppBar了，僅僅只顯示自己想要的頁面內容（child屬性即自己的內容）。
class PageThree extends StatelessWidget {
String data;
PageThree(this.data);
@override
Widget build(BuildContext context) {
// 不顯示AppBar
return FRouter(
isShowAppBar: false,
child: RaisedButton(
onPressed: () {
FRouter.backPageRouter(context);
},
child: Text('點擊進行跳轉'),
),
);
}
}
