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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 上一篇我们已经在Android工程中集成Flutter工程了,也就是说有一些界面是需要使用Flutter写的...
    ywy_袁滚滚阅读 28,729评论 12 26
  • 本文先介绍一下现有工程如何集成 Flutter 实现混合开发,以及混合项目如何打包,再探索下如何降低原生和 Flu...
    koin447阅读 5,743评论 1 37
  • 很多时候,我们的脑袋中总会有很多的想法冒出来,但是我们大都会停留在“想到”却很少有人“做到”。 做到,就是执行力,...
    下半辈子_阅读 304评论 0 1
  • 从一开始她便不是一个安分的女人,结婚两年她早倦了,如今和她同床共枕的那个男人,最近一直在想,当初嫁给他到底值不值,...
    圈圈城阅读 183评论 0 0
  • 我在高中的时候,朦朦胧胧有了人生第一次心动的感觉。 那时候,一个人在外住校,家中母亲刚去世不久,内心十分孤单和凄凉...
    云紫烟阅读 465评论 1 3