Flutter路由輕量級框架FRouter

AWeiLoveAndroid發表於2019-10-27
Flutter路由框架

版權宣告：本文為博主原創文章，未經博主允許不得轉載。juejin.im/post/5db5a2…

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

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

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

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

傳送位置比較零散

接收也不太好維護

頁面冗餘程式碼比較多

二、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('點選進行跳轉'),
      ),
    );
  }
}
複製程式碼

相關文章