Flutter路由輕量級框架FRouter

版權聲明：本文爲博主原創文章，未經博主容許不得轉載。juejin.im/post/5db5a2…

轉載請標明出處： juejin.im/post/5db5a2… 本文出自 AWeiLoveAndroid的博客

---

最近對路由作了封裝，寫了一個輕量級框架，讓你輕鬆地使用路由，再也不那麼麻煩。任何頁面均可以用，真的是方便快捷。已經傳到了github，歡迎朋友們給個star，感謝你們，但願能在幫助你們的同時，麻煩你們給個打賞買口水喝，謝謝你們。

開源倉庫地址：github.com/AweiLoveAnd…

1、目前路由使用中存在的問題

發送位置比較零散

接收也不太好維護

頁面冗餘代碼比較多

2、FRouter輕量級路由框架的思路

針對以上路由存在的問題，我對路由作了一個封裝，解決了路由存在的一些問題，把發送和接收路由作了統一處理，而且對不一樣的頁面需求作了適應，讓代碼維護變得更間接明瞭，不管是在哪一個頁面均可以直接用 FRouter 操做路由了。

3、代碼思路分析

首先針對不一樣的頁面，作了適配處理，

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('點擊進行跳轉'),
      ),
    );
  }
}
複製代碼