1.增加page_router.dart文件

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

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

2.增加page_routes.dart

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

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

3.注冊routes

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

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

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

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

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

4.設(shè)置router到MaterialApp

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

PageRouter.setupRoutes();

就是調(diào)用上面PageRouter的setupRoutes方法執(zhí)行注冊routes

跟MaterialApp綁定

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

5.改進(jìn)

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

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

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

我們使用這個有幾個好處

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

看下使用效果

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

接下來我們改造下fluro給頁面?zhèn)鲄?shù)那里 增加一個類

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

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

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

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

現(xiàn)在看的話感覺這就是坨~~~啊

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

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

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

來看下我們怎么傳值

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。