fish_redux在flutter_web中路由配置,解决浏览器跳转页面

最近惊奇的发现在目前的flutter dev for web 版本中可以用fish_redux管理路由,并且在目前的版本中不再是flutter_web 跟flutterfor iPhone分开的模式,开发者可以使用同一个包下面的UI来开发。目前三端开发都是使用flutter/material.dart中的组件,因此基本上可以做到一次编写,分别打包iOS,Android,web三端。

关于for web 的路由配置如下:

//在 main.dart中
import 'dart:collection';

import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import 'package:jobclient/app_route.dart';
import 'package:jobclient/utils/base_tools.dart';

void main() {
//  println(name+"---------");
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      showSemanticsDebugger: false,
      debugShowCheckedModeBanner: false,

      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
//      home: AppRoute.global.buildPage(RoutePath.APP_HOME, null),
      onGenerateRoute: (RouteSettings settings) {
        Map<String ,dynamic> map=BaseTools.urlToMap(settings.name);
        return MaterialPageRoute<Object>(builder: (BuildContext context) {
          return AppRoute.global.buildPage(settings.name.replaceAll("/", "").split("?")[0], map);
        });
      },
      initialRoute: "app_home",
    );
  }
}

//urlToMap方法:

  static Map<String,dynamic> urlToMap(String url){
    Map<String,dynamic > map=new HashMap();
    if(isEmpty(url)||!url.contains("?")){
      return null;
    }else{
      List<String> urlList=url.split("?");
      urlList=urlList[urlList.length-1].split("&");
      for(int i=0;i<urlList.length;i++){
        map[urlList[i].split("=")[0]]=urlList[i].split("=")[1];
      }
    }
    return map;
  }

这样配置的目的是,在浏览器,如果想直接访问页面可以使用url/[路由名称]?XXX=XXX&XXX=XXX的方式来访问并传值。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章