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的方式來訪問並傳值。

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