flutter 路由管理

安裝fluro插件

• fluro的文檔地址爲：fluro
• 在pubspec.yaml文件中添加dependencies，以下：

dependencies:
 fluro: "^1.5.1"

• package get下載對應的依賴插件

搭建項目結構，全局配置

• 在lib目錄下新建router文目錄，目錄結構以下：
  --lib
  ----router
  --------application.dart
  --------router_handler.dart
  --------routers.dart
• 配置入口文件，application.dart中就只有一個靜態屬性，保存一個全局公用（static）的Router對象，application.dart文件內容以下：

import 'package:fluro/fluro.dart';  
  
class Application {  
  static Router router;  
}

• 在入口文件main.dart中的主方法（main）中實例化一個公用的Router對象，存在application中，用的時候也是從apllication.dart中拿，而後配置router，main方法中關鍵代碼以下：

final router = Router();  
Routes.configureRoutes(router);  
Application.router = router;

• 注入頂層的MaterialApp中，以下：

class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Container(  
      child: MaterialApp(  
        title: '這是title',  
        // 關鍵代碼開始
        onGenerateRoute: Application.router.generator,
        // 關鍵代碼結束
        debugShowCheckedModeBanner: false,  
        theme: ThemeData(primaryColor: Colors.pink),  
        home: IndexPage(),  
      ),  
    );  
  }  
}

編寫router結構文件關鍵代碼

• application.dart文件,用於存取全局公用的Router對象

import 'package:fluro/fluro.dart';  
  
class Application {  
  static Router router;  
}

• routers.dart文件，用於配置fluro插件中的Router對象，把全部對應的路由名稱和頁面配置在這個文件裏面

import 'package:fluro/fluro.dart';  
import 'package:flutter/cupertino.dart';  
import 'package:flutter_shop/router/router_handler.dart';  
  
class Routes {  
  static String root = '/';  
  static String detailsPage = 'details';  // 自定義詳情頁面路由名稱爲details
  static String jpushPage = 'jpush';  // 自定義極光推送頁面路由名稱爲jpush
    
  static void configureRoutes(Router router) {  // 路由配置，用define函數將路由和頁面對應
    router.notFoundHandler = new Handler(  // 頁面不存在的時候處理函數
      handlerFunc: (BuildContext context,Map<String,List<String>> params) {  
        print('ROUTER IS NOT FOUND!');  
      }  
    );  
    router.define(detailsPage, handler: detailsHandler);  
    router.define(jpushPage, handler: jpushHandler);  
    // 若是有其餘頁面，繼續寫router.define(xxx, handler: xxx);
  }  
}

• router_handler.dart文件，對應的每一個handler都返回對應的頁面，並處理傳入相應的路由參數

import 'package:fluro/fluro.dart';  
import 'package:flutter/cupertino.dart';  
import 'package:flutter_shop/pages/details_page.dart';  
import 'package:flutter_shop/pages/jpush_page.dart';  
  
// 詳情頁面handler，返回對應頁面，而且處理url攜帶過來的參數id，實例化對象的時候傳入，在頁面初始話的時候能拿到這個id
Handler detailsHandler = new Handler(handlerFunc: (BuildContext context,Map<String,List<String>> params){  
  String goodsId = params['id'].first;  
  return DetailsPage(goodsId);  
});  
  
// jpush(極光推送頁面hanler)，返回對應頁面，而且沒有參數須要處理
Handler jpushHandler = new Handler(handlerFunc: (BuildContext context,Map<String,List<String>> params){  
  return JPushPage();  
});

調用navigateTo進行頁面跳轉

InkWell(  
  onTap: (){  
    // 使用全局的Router對象，調用navigateTo進行跳轉，details爲在routers.dart中定義的屬性值，前面加上'/'，若是攜帶參數，後面接上'?參數名=值'
    Application.router.navigateTo(context, '/details?id=123');  
  },  
  child: xxx
)