1.增加page_router.dart文件

在這里文件里面編寫下面的代碼

一個PageRouter類，里面我們定義靜態的fluro提供的Router實例 然后再定義個靜態方法setupRoutes,用來設置我們的routes

2.增加page_routes.dart

在這里我定義了一個map集合，key是頁面的path,value是按照fluro的要求是一個Handler的實例

這里注意到我們的HomePage頁面需要傳入一個userId參數，那我在這里就要提前把它傳入進去 首先我在定義path時要注意/home是頁面的path,:userId相當于頁面url的參數，是個占位符，一會跳轉的時候我們要傳入 比如:router.navigateTo(context, "/home/1234", transition: TransitionType.fadeIn);另外那個params參數是個map,key就是我們左邊定義的占位符的參數名字，但是呢，params["userId"]是個List,并沒有直接取出傳的值，我不太明白這里為啥搞個List出來，直接給我值不行嗎？而且這個值實在List的第一個，所以我們用.first取出來

3.注冊routes

上面我們定義好了routes,但是還沒有跟fluro扯上半點關系，接下來我們把它們關聯起來

回到page_router.dart文件 我們在setupRoutes方法里面添加代碼，我們先導入page_routes.dart文件

在setupRoutes里面我們遍歷那個map,里面調用router.define()來把路由注冊到Fluro Router。 這里我們已經完成了大部分的工作 強調一下，在我使用fluro之前我也搜索了相關文章，發現他們在注冊路由時都是在手動注冊，就是類似這樣的代碼

router.define(xx, handler: xxHandler);
router.define(xx, handler: xxHandler);

作為程序員能自動就別手動對吧，這樣的重復代碼直接循環搞定就行了，也可能別人是為了演示簡單寫寫吧。

4.設置router到MaterialApp

先在main.dart的入口main()方法里面執行下面的代碼

PageRouter.setupRoutes();

就是調用上面PageRouter的setupRoutes方法執行注冊routes

跟MaterialApp綁定

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
primarySwatch: Colors.blue,
 ),
 onGenerateRoute: PageRouter.router.generator,
) 

5.改進

我們回顧下第2步添加routes的時候的寫法 我感覺看起來還是不夠優雅啊

都是以字符串來命名路由名字，很容易起沖突導致被覆蓋，當頁面名字多的時候后面添加的頁面path容易跟上面的一樣，而且我們頁面傳的參數那個占位符寫起來樣子怪怪的，兩三個參數下來path長長的一大堆，
頁面傳參數很啰嗦，我覺得那個params設計的很不好，是個map我們取值時類型丟失，我們一眼看過去不知道到底取得什么類型，雖然params取出來的是個List,我們可以知道是個String,但是我無法從肉眼直接看到是什么類型，特別是當接盤俠來改代碼時，一臉懵逼啊。類型丟失就是因為fluro內部寫死了從params取出來的都是String的值，不過可以理解，一般url傳參數也都是字符串類型吧，但是比如我上面給ClassDetailPage傳id時，因為我定義的是int類型，而我通過params["id"][0]拿到的是String,我還要做個類型轉換，
這串代碼整體看起來冗余，寫起來很麻煩

廢話說太多了，來優化一下吧 首先解決頁面之間傳值得問題，用fluro傳值需要在定義routes的地方提前寫好，我認為不太符合習慣，我的習慣是我在跳轉頁面的時候我再去組合數組把值傳過去，現在我不僅要在定義routes的時候取值賦值，還要在跳頁面的時候再組合數據進行傳值， 這時候呢，如果你是安卓程序員你會不會想到Activity之間傳值得時候用到的一個叫Bundle的東西呢？沒錯，我們把它搞過來

我們使用這個有幾個好處

一眼看過去能明顯知道你要從map中取得是什么類型的值，獲取你放的是什么類型的值
我們把頁面之間要傳遞的數據通過一個Bundle對象打包傳輸，避免了我們在使用fluro時挨個從params來取參數，
如果你用的key不小心寫錯了，我會拋出異常提示，不用等到用的時候才發現是null,

看下使用效果

這樣子做，接盤俠再也不會抱怨不知道你寫的什么類型了，上面我寫錯了類型，ide也能提示出來

接下來我們改造下fluro給頁面傳參數那里 增加一個類

一個叫PageBuilder的類，getHandler最終返回fluro需要的handler,

下面我們來改造page_routes.dart文件

看這里是不是比之前清爽了很多，

map的key不再是字符串，我們定義了一個枚舉，PageName,我們知道枚舉的值不能重復，當你寫重復的時候，ide直接提示出來了，這樣保證了我們不會出現像字符串那樣重復
我們看下map的value,是不是很清爽，沒有了之前那一大堆的東西，看下之前的

現在看的話感覺這就是坨~~~啊

優化后我們每次增加頁面只需要先增加一個頁面名稱到枚舉PageName，然后再來給這個map添加key和value vlaue就直接寫

PageBuilder(builder: (bundle) => LoginPage())
復制代碼

這里這個bundle就是你在頁面之間傳值得bundle,你要把要傳輸的值放在這個bundle對象里面，然后手動傳到頁面的參數里比如這個PageBuilder(builder: (bundle) => HomePage(bundle))HomePage里面我聲明了final Bundle bundle;

來看下我們怎么傳值

這里我們要用到flutter自帶的Navigator來跳轉了，Navigator.pushNamed的第二個參數是String類型，所以我們這里對這個枚舉的值進行toString一下，可以看到我們這里直接從PageName來拿頁面名字，而不用像之前那樣自己輸入字符串，很容易輸入錯誤， 再看arguments,這個參數就放我們的bundle對象，通過這個參數把bundle傳輸到下一個頁面

總結

以上是生活随笔為你收集整理的对Flutter路由管理库Fluro的封装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。