Flutter交互 原生跳Flutter页面通过路由传参
原生跳到Flutter页面,由于Flutter没有方法可以传递参数,所以现在只能依靠initialRoute的String来传递参数。
原生跳Flutter页面路由传参:
1、可以在flutterView.setInitialRoute添加参数,例如:{"path":"test_fade_app","param":"{"name":"test","version":"1.0.0"}"}
2、Flutter端runApp(new MaterialApp(home: _widgetRouter(ui.window.defaultRouteName),));,3、window.defaultRouteName可以拿到这个json字符串{"path":"test_fade_app","param":"{"name":"test","version":"1.0.0"}"},再路由并解析参数就可以了。
Flutter 端代码
void main() => runApp(new MaterialApp(
home: _widgetRouter(ui.window.defaultRouteName),
));
Widget _widgetRouter(String json){
print("==== main === json = $json");
String path = "test_sample";
String param = "";
if (json != null && json.isNotEmpty && json != "/") {
var jsonResponse = jsonDecode(json);
path = jsonResponse["path"];
print("==== main === path = $path");
param = jsonResponse["param"];
print("==== main === param = $param");
path = path != null && path.isNotEmpty ? path : "test_sample";
param = param != null && param.isNotEmpty ? param : "";
switch(path){
case "test_sample":
return MyHomePage(title: 'Flutter Demo Home Page');
case "test_fade_app":
return MyFadeTest();
}
return MyHomePage(title: 'Flutter Demo Home Page');
}
}
这里封装的json数据主要包含两层内容,一个是path也就是我们约定好的一些Flutter页面,param是需要传递的一些参数,可以传递给flutter的页面,作为页面间的数据传递。
Android 端FlutterTestActivity 代码
public class FlutterTestActivity extends FlutterActivity {
private String routeStr = "";
@Override
public FlutterView createFlutterView(Context context) {
HashMap map = new HashMap<>();
HashMap params = new HashMap<>();
params.put("version", "1.0.0");
params.put("name", "test");
map.put("path", "test_fade_app");
map.put("param", JSON.toJSONString(params));
WindowManager.LayoutParams matchParent = new WindowManager.LayoutParams(-1, -1);
FlutterNativeView nativeView = this.createFlutterNativeView();
FlutterView flutterView = new FlutterView(FlutterTestActivity.this, null, nativeView);
flutterView.setInitialRoute(JSON.toJSONString(map));
flutterView.setLayoutParams(matchParent);
flutterView.enableTransparentBackground();
this.setContentView(flutterView);
return flutterView;
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
GeneratedPluginRegistrant.registerWith(this);
}
}
flutterView.enableTransparentBackground() 的作用是去除启动flutter页面的时候的黑屏
接下来我们将代码进行一些优化,方便之后统一管理,新建一个RouterManager管理类,router.dart代码如下:
class RouterManager {
static RouterManager mInstance = new RouterManager();
static RouterManager getInstance() {
return mInstance;
}
/*
根据传入的协议名 找到对应跳转的路径
*/
StatefulWidget getPageByRouter(String json) {
String path = "";
String param = "";
if (json != null && json.isNotEmpty && json != "/") {
var jsonResponse = jsonDecode(json);
path = jsonResponse["path"];
print("==== router === path = $path");
param = jsonResponse["param"];
print("==== router === param = $param");
path = path != null && path.isNotEmpty ? path : RouterPath.TEST_SAMPLE;
param = param != null && param.isNotEmpty ? param : "";
}
Widget widget = _getWidgetPage(path);
return widget;
}
Widget _getWidgetPage(String path) {
Widget widget;
switch (path) {
case RouterPath.TEST_SAMPLE:
widget = MyHomePage(title: 'Flutter Demo Home Page');
break;
case RouterPath.TEST_FADE_APP:
widget = MyFadeTest();
break;
}
return widget;
}
}
class RouterPath {
//================ 测试相关界面 =======================
static const String TEST_SAMPLE = 'test_sample';
static const String TEST_FADE_APP = 'test_fade_app';
}
main.dart调用方法
void main() => runApp(new MaterialApp(
home: _widgetRouter(ui.window.defaultRouteName),
));
Widget _widgetRouter(String json){
print("==== main === json = $json");
return RouterManager.getInstance().getPageByRouter(json);
}
Android端的代码现保持不变,之后再做对应代码优化。
项目demo:https://github.com/cyihui/CommonFlutter-master