博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
flutter接入现有的app详细介绍
阅读量:6760 次
发布时间:2019-06-26

本文共 8639 字,大约阅读时间需要 28 分钟。

老套路: 让我们看一下效果呗:

接入方式

接入的方式,我是参考的官方的,我这里尝试的是android的接入方式,还算比较顺利。

1、在你的Android工程目录同级目录下执行命令 flutter create -t module my_flutter ,执行完毕之后,应该是这个样子。

2、打开你的Android工程的setting.gradle文件,行起一行,加上:

setBinding(new Binding([gradle: this]))                                 // newevaluate(new File(                                                      // new        settingsDir.parentFile,                                               // new        'tip_flutter/.android/include_flutter.groovy'                          // new))复制代码

这几行代码的意思就是说,将你刚才创建的那个module作为android模块引入到Android工程中。 3、最后打开你的app目录下的build.gradle,在依赖中加上

//flutter    implementation project(':flutter')复制代码

ok,同步一下,你就将flutter引入到的你现有的android工程了,ios的步骤就不作介绍了,参照文档,实际上不复杂。

遇到问题

当然,我上面说的过程相当顺利,但是,我接入的过程并没有这么顺利,我各种都会尝试一下。 1、比如,我们不在Android工程的同级目录去flutter create -t module my_flutter会怎么样,我尝试了,只需要对路径加上你工程目录名即可,这么写

setBinding(new Binding([gradle: this]))                                 // newevaluate(new File(                                                      // new        settingsDir.parentFile,                                               // new        '你工程目录名/tip_flutter/.android/include_flutter.groovy'                          // new))复制代码

也ok,但是不雅观,那ios引入这个flutter模块,岂非需要到你android工程中来找,所以,独立于Android工程会更优雅点,保持物理解耦。 2、有些小伙伴可能配置了buildTypes,当然,同步的话肯定是失败的,解决的办法是修改你的.android目录的flutter目录中的build.gradle。保持和你的app的buildTypes一致即可。

3、debug跑的很好,release跪了,这个肯定就是混淆的问题了,可以参考

-keep class io.flutter.app.** { *; }-keep class io.flutter.plugin.**  { *; }-keep class io.flutter.util.**  { *; }-keep class io.flutter.view.**  { *; }-keep class io.flutter.**  { *; }-keep class io.flutter.plugins.**  { *; }复制代码

4、 这个明显就是没有加载到对应的cpu架构支持的so库,请,有人直接

ndk {                abiFilters "armeabi","armeabi-v7a"。。。。把所有的都加上,这,你的包大的你受得了么。            }复制代码

总结,其实接入的过程并没有那么顺利,哈哈,还是蛮多坑的,不过一般都能找到解决办法。

使用姿势

原生模块要拉起flutter模块的方式官方提供了两种: 1、直接createView创造一个flutterView,把他添加到你的布局中,这里的route1。

View flutterView = Flutter.createView(      MainActivity.this,      getLifecycle(),      "route1"    );    FrameLayout.LayoutParams layout = new FrameLayout.LayoutParams(600, 800);    layout.leftMargin = 100;    layout.topMargin = 200;    addContentView(flutterView, layout);复制代码

相信你一开始不知道是什么,这实际上是flutter管理页面的一种方式,使用路由来处理,可以为每个页面配置好路由,这里route1表示那个页面的名字,这样就可以直接跳到名字为route1的按个页面,如果写"/",那就是直接跳到main.dart的那个页面了,这里继续深究,为什么"/"跳到main,那是因为main.dart里面的这句话 void main() => runApp(new MyApp());,可以理解他是根。 2、使用fragment的方式

FragmentTransaction tx = getSupportFragmentManager().beginTransaction();   tx.replace(R.id.someContainer, Flutter.createFragment("route1"));   tx.commit();复制代码

好了,以上就是两种元素模块应用flutter模块的方式,实际上机智的你会发现是一种而已,都是添加了一个flutterView到原生中而已,而你看源码,发现flutterView实际上是SurfaceView而已,只不过实现了一个特殊的接口BinaryMessenger

flutter调用原生模块

光打开一个flutter实现的页面,非常简单,可是里面展示的数据从哪里来呢?通常有两种方式, a、nativie把数据发送过去给到flutter端。 b、flutter端向native端要数据。 这里,我们首先来看第二种,flutter端向native端要数据,因为第二种官方提到的比较多,通常flutter调用原生的方式是通过MethodChannel来做的,具体怎么做,我们先来了解下。

MethodChannel(getFlutterView(), "app.channel.shared.data")      .setMethodCallHandler(MethodChannel.MethodCallHandler() {        @Override        public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {          if (methodCall.method.contentEquals("getSharedText")) {            result.success("some thing want to send to flutter");            sharedText = null;          }        }      });复制代码

我们看下的源码定义,这里截取部分

public final class MethodChannel {    private static final String TAG = "MethodChannel#";    private final BinaryMessenger messenger;    private final String name;    private final MethodCodec codec;    public MethodChannel(BinaryMessenger messenger, String name) {        this(messenger, name, StandardMethodCodec.INSTANCE);    }复制代码

前面提到过,第一个参数是BinaryMessenger,由于FlutterView实现了这个接口,所以,官方demo中传给的是getFlutterView()

那么很显然,我们前面提到的使用姿势章节介绍了两种方式,第一种方式,FlutterView很明显就在那里,你很容易拿到他,然后开启一个MethodChannel。那么第二种方式呢?不急,看看FlutterFragment是个什么鬼。

public class FlutterFragment extends Fragment {  public static final String ARG_ROUTE = "route";  private String mRoute = "/";  @Override  public void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    if (getArguments() != null) {      mRoute = getArguments().getString(ARG_ROUTE);    }  }  @Override  public void onInflate(Context context, AttributeSet attrs, Bundle savedInstanceState) {    super.onInflate(context, attrs, savedInstanceState);  }  @Override  public FlutterView onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {    return Flutter.createView(getActivity(), getLifecycle(), mRoute);  }}复制代码

打开一看很简单,onCreateView返回的其实就是一个FlutterView,这也就是前面提到的,实际上原生引用flutter模块其实就是往已有的布局上加FlutterView而已。

好,弄清楚了两种方式之后,下面,我以第二种方式的形式来介绍一下,具体如何操作。

public class FlutterBaseFragment extends FlutterFragment {    private static final String METHOD_CHANNEL = "tip.flutter.io/method";    public static FlutterBaseFragment newInstance(String route) {        Bundle args = new Bundle();        args.putString(ARG_ROUTE, route);        FlutterBaseFragment fragment = new FlutterBaseFragment();        fragment.setArguments(args);        return fragment;    }    @SuppressWarnings("unchecked")    @Override    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {        super.onViewCreated(view, savedInstanceState);        new MethodChannel((FlutterView) getView(), METHOD_CHANNEL).setMethodCallHandler(                new MethodChannel.MethodCallHandler() {                    @Override                    public void onMethodCall(MethodCall call, final MethodChannel.Result result) {                        if (call.method.equals("getBatteryLevel")) {                            int batteryLevel = getBatteryLevel();                            if (batteryLevel != -1) {                                result.success(batteryLevel);                            } else {                                result.error("UNAVAILABLE", "Battery level not available.", null);                            }                        } else {                            result.notImplemented();                        }                    }                });    }    private int getBatteryLevel() {...}}复制代码

以上就是原生的实现部分,然后,flutter那边如何调用呢?

class _MyHomePageState extends State
{ static const platform = const MethodChannel('tip.flutter.io/method'); String _batteryLevel = 'Unknown battery level.'; Future
_getBatteryLevel() async { String batteryLevel; try { final int result = await platform.invokeMethod('getBatteryLevel'); batteryLevel = 'Battery level at $result % .'; } on PlatformException catch (e) { batteryLevel = "Failed to get battery level: '${e.message}'."; } setState(() { _batteryLevel = batteryLevel; }); }复制代码

很熟悉吧,这就是官方demo而已。

那么,通过MethodChannel发送给flutter的数据难道就没有要求么?任意类型的数据都能发送么?很抱歉,并不是,比如,你自定义的class显然是不可以的。他支持的类型只有以下:

so、我们要发送自定义类型数据过去如何办?

显然,我们需要转换为dart支持的类型,也许,你可能想到了Object->Json,然后,到了flutter那边,在变为Json对象即可。 不过也有其他的方式,比如,你们恰好使用的是protobuf的话,那么直接传byte[]肯定很不错啦,再者,你还可以实现自定义协议,如果有足够的时间的话。总之传递的数据需要是平台之间都能识别的类型。

原生向flutter发送数据

原生向flutter发送数据,这个感觉起来怪怪的,那么,具体的场景是什么,举个例子是不是好理解点,好的,比如,手机充电状态的改变,这个变动的消息,如何传达到flutter那边呢?

这时候,就需要用到EventChannel,实际上和MethodChannel发送数据过去的方式没啥区别,只不过,我们理解, MethodChannel是flutter端主动请求,拿到了数据,而,EventChannel可能理解为是从原生主动推送过去的。

new EventChannel((FlutterView) getView(), EVENT_CHANNEL).setStreamHandler(new EventChannel.StreamHandler() {            @Override            public void onListen(Object arguments, final EventChannel.EventSink events) {                Timer timer = new Timer();                timer.schedule(new TimerTask() {                    @Override                    public void run() {                        events.success("当前时间毫秒" + System.currentTimeMillis() / 1000);                    }                }, 1000, 1000);            }            @Override            public void onCancel(Object arguments) {    ...            }        });复制代码

那么,flutter端的代码,怎么收到这个EventChannel推送过去的数据呢?

Future
_lisEvent() async { String eventStr; try { _streamSubscription = eventChannel.receiveBroadcastStream().listen((data) { eventStr = 'event get data is $data '; setState(() { _eventStr = eventStr; }); }); } on PlatformException catch (e) { eventStr = "event get data err: '${e.message}'."; setState(() { _eventStr = eventStr; }); } }复制代码

总结

原生拉起flutter做的页面以及flutter调用原生模块以及原生模块推送数据到flutter经过验证都是ok的,因此flutter接入现有的app这条路是可行的,接入flutter之后,包大小会激增5.5M+,主要是因为需要用到这个so库,如果能够从网络获取多好,可惜目前只能打包到apk中。在加上业务生成的一些文件,总体上来说,写一个简单的业务,就差不多使得包大小增加了8M左右啦

这一点对于包大小有强迫症的童鞋需要慎重考虑了。

转载地址:http://hxbeo.baihongyu.com/

你可能感兴趣的文章
macOS 10 13 Cocoapods 命令错误
查看>>
Swift3中的 Method Swizzling
查看>>
BroadcastReceive简介
查看>>
知乎 node事件机制 转载
查看>>
学习JavaScript数据结构与算法 (一)
查看>>
vue预渲染prerender-spa-plugin解决首屏白屏问题
查看>>
生产系统 SQL 执行异常原因分析
查看>>
【CSS基础】--居中的方式总结
查看>>
关于app的登录退出内容
查看>>
基于 Laravel 的模块化开发框架 Notadd RC1 fix1 发布
查看>>
模拟new实现
查看>>
30分钟理解GraphQL核心概念
查看>>
git 的常用命令
查看>>
Nacos v0.7.0:对接CMDB,实现基于标签的服务发现能力
查看>>
阿里巴巴AI夺肝结节诊断两项世界冠军,至今无人超越
查看>>
Java架构-(四)整合spring cloud云服务架构 - 企业分布式微服务云架构构建
查看>>
【译】终极指南:变量提升、作用域和闭包
查看>>
库克正名最贵iPhone:没有比X系列更好用的手机了
查看>>
go-chassis 为 grpc-go 带来高级云原生特性
查看>>
JS中如何获取url中的某个参数的值
查看>>