Flutter 混合开发(Android)路由开发

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<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页面的时候的黑屏

接下来我们将代码进行一些优化,方便之后统一管理,新建一个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

    原文作者:听话哥
    原文地址: https://www.jianshu.com/p/f50ed2e15db7
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞