最近驚奇的發現在目前的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的方式來訪問並傳值。