Flutter交互 原生跳Flutter頁面通過路由傳參
原生跳到Flutter頁面,由于Flutter沒有方法可以傳遞參數(shù),所以現(xiàn)在只能依靠initialRoute的String來傳遞參數(shù)。
原生跳Flutter頁面路由傳參:
1、可以在flutterView.setInitialRoute添加參數(shù),例如:{"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"}"},再路由并解析參數(shù)就可以了。
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數(shù)據(jù)主要包含兩層內容,一個是path也就是我們約定好的一些Flutter頁面,param是需要傳遞的一些參數(shù),可以傳遞給flutter的頁面,作為頁面間的數(shù)據(jù)傳遞。
Android 端FlutterTestActivity 代碼
public class FlutterTestActivity extends FlutterActivity {
private String routeStr = "";
@Override
public FlutterView createFlutterView(Context context) {
HashMap<String, Object> map = new HashMap<>();
HashMap<String, Object> 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頁面的時候的黑屏
接下來我們將代碼進行一些優(yōu)化,方便之后統(tǒng)一管理,新建一個RouterManager管理類,router.dart代碼如下:
class RouterManager {
static RouterManager mInstance = new RouterManager();
static RouterManager getInstance() {
return mInstance;
}
/*
根據(jù)傳入的協(xié)議名 找到對應跳轉的路徑
*/
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端的代碼現(xiàn)保持不變,之后再做對應代碼優(yōu)化。
項目demo:https://github.com/cyihui/CommonFlutter-master