Flutter企業級路由跳轉框架fluro的使用(一)

久違了。

記錄 fluro 路由框架的使用。

導入依賴

  fluro: ^1.6.3

組件封裝

routers.dart

這個文件封裝了一個路由器，定義了配置方法，封裝了有返回值，和無返回值的路由跳轉方法。

//封裝一個Routes 類
class Routes {
  //定義Router 對象
  static Router router;

  //定義路由路徑
  static String secondPage = "/secondPage";

  //全局路由配置
  static void configureRoutes(Router router) {
    //定義找不到路由的回調方法，與顯示界面
    router.notFoundHandler = Handler(
        handlerFunc: (BuildContext context, Map<String, List<String>> params) {
      print("route not found!");
      return Scaffold(
        body: Center(
          child: Text("Page not found"),
        ),
      );
    });

    //這裏能夠依次添加多個跳轉的路由頁面

    //定義一個路由路徑與Handler,
    router.define(secondPage, handler: secondPageHandler);
  }

  // 須要頁面返回值的跳轉
  static navigateToForResult<T>(BuildContext context, String path,
      {Map<String, dynamic> params,
      bool clearStack = false,
      TransitionType transition = TransitionType.fadeIn}) async {
    //FocusScope.of(context).requestFocus(new FocusNode());
    String query = "";
    if (params != null) {
      int index = 0;
      for (var key in params.keys) {
        var value = Uri.encodeComponent(params[key]);
        if (index == 0) {
          query = "?";
        } else {
          query = query + "\&";
        }
        query += "$key=$value";
        index++;
      }
    }
    print('我是 navigateTo 傳遞的參數：$query');

    path = path + query;
    T _result = await router.navigateTo(context, path,
        clearStack: clearStack, transition: transition);
    return _result;
  }

  // 對參數進行 encode，解決參數中有特殊字符
  //不須要返回值的跳轉
  static Future navigateTo(BuildContext context, String path,
      {Map<String, dynamic> params,
      bool clearStack = false,
      TransitionType transition = TransitionType.fadeIn}) {
    //FocusScope.of(context).requestFocus(new FocusNode());
    String query = "";
    if (params != null) {
      int index = 0;
      for (var key in params.keys) {
        var value = Uri.encodeComponent(params[key]);
        if (index == 0) {
          query = "?";
        } else {
          query = query + "\&";
        }
        query += "$key=$value";
        index++;
      }
    }
    print('我是 navigateTo 傳遞的參數：$query');
    path = path + query;
    return router.navigateTo(context, path,
        clearStack: clearStack, transition: transition);
  }
}

其中初始化配置的所需 secondPageHandler 單獨抽做一個文件。

handlers.dart

//建立Handler用來接收路由參數及返回第二個頁面對象


Handler secondPageHandler = Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
  if (params != null&&params.length>0) {
    String key = params['key'].first;
    return SecondFluroPage(
      param1: key,
    );
  } else {
    return SecondFluroPage();
  }
});

封裝完畢，接着看初始化與調用。

fluro_app.dart

初始化的工做通常在 main() 方法入口中作。以下：

void main() {
  runApp(FluroApp());
}

class FluroApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    //建立路由對象
    final router = Router();

    //配置路由集Routes的路由對象
    Routes.configureRoutes(router);

    //給Routes 的router賦值
    Routes.router = router;

    return MaterialApp(
      title: "Fluro路由導航示例",
      debugShowCheckedModeBanner: false,
      //生成路由的回調函數，當導航的命名路由的時候，會使用這個來生成界面
      onGenerateRoute: Routes.router.generator,
      //主頁指定爲第一個頁面
      home: FirstFluroPage(),
    );
  }
}

第一個頁面

演示兩種方法調用路由。

//第一個頁面
class FirstFluroPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Fluro路由導航示例"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            RaisedButton(
              //點擊處理
              onPressed: () {
                //跳轉
                _skip1(context);
              },
              child: Text('有參打開第二個頁面'),
            ),
            RaisedButton(
              //點擊處理
              onPressed: () {
                //跳轉
                _skip2(context);
              },
              child: Text('無參打開第二個頁面'),
            )
          ],
        ),
      ),
    );
  }



  //不須要返回值的跳轉調用
  _skip1(BuildContext context) {
    //路由帶的參數
    //經過Routes類裏的路由封裝導航至第二個頁面 可指定頁面切換動畫類型
    //無返回值的調用，但也能打印出第二個界面退出後的返回值
    Routes.navigateTo(
      context,
      Routes.secondPage,
      params: {"key": "Hello"},
      transition: TransitionType.fadeIn,
    ).then((result) {
      if (result != null) {
        print(result);
      }
    });
  }

  //須要返回值的跳轉調用
  _skip2(BuildContext context) async {
    //路由帶的參數
    //經過Routes類裏的路由封裝導航至第二個頁面 可指定頁面切換動畫類型
    //異步獲取第二個界面退出後的返回值
    var result = await Routes.navigateToForResult(
      context,
      Routes.secondPage,
      transition: TransitionType.fadeIn,
    );

    print(result.toString());
  }
}

第二個頁面

class SecondFluroPage extends StatefulWidget {
  //參數
  final String param1;

  const SecondFluroPage({Key key, this.param1}) : super(key: key);

  @override
  _SecondFluroPageState createState() => _SecondFluroPageState();
}

class _SecondFluroPageState extends State<SecondFluroPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("第二個頁面"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            //顯示傳遞參數值
            Text(
              '${widget.param1 ?? "所傳參數爲空"}',
              style: TextStyle(
                fontSize: 28.0,
                color: Colors.red,
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: RaisedButton(
                onPressed: () {
                  //出棧帶上參數 返回至第一個頁面
                  Navigator.pop(context, '第二個頁面返回參數(${widget.param1 ?? null})');
                },
                child: Text('點擊返回'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

效果圖

跳轉後...

打印的日誌...

本文分享自微信公衆號 - Flutter學習簿（gh_d739155d3b2c）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。