美文网首页
Native-Flutter混合开发 架构和使用

Native-Flutter混合开发 架构和使用

作者: 武汉刘德华 | 来源:发表于2023-01-11 11:32 被阅读0次

            Native-Flutter混合开发目录 结构使用FlutterModule,这是Flutter官方推荐API。集成FlutterModule有3种方法,可以参考Flutter文档将 Flutter module 集成到 iOS 项目 - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter。然后IOS和安卓可以一起维护一份Moudle文件就可以啦,简单快捷。

             Native-Flutter混合开发交互使用flutter_boost,这是咸鱼技术团队出的,Git地址flutter_boost。当然你可以使用原生Channle进行交互。

            文件内部状态管理使用provider-ChangeNotifier。由于GetX的路由和flutter_boost路由产生冲突,所以放弃GetX.obx的使用,使用provider进行状态管理。

            调试,使用Android Studio进行Flutter文件调试,最终还是抛弃了我的VSCode。(安卓的同学就随便调试了~~)你如图运行,然后模拟器跑起来就会自动连接的。

    调试

             我们项目由于是组件化,所以Podfile集成的方案并不能满足我们项目。所以我们使用第三种方案(下图1),生成frameWorks。然后在组件.podspec文件中发现只能链接到本目录以内的文件路径,超过当前组件目录范围就找不到了(下图2)。没办法,只能手动拉到组件里面进行链接了(下图3)。这个组件Flutter混合开发我感觉是废了,因为每次改变都要更新这个FrameWork,不知道哪位有什么更优方案。

    (1) (2) (3)

    具体使用--

            IOS方面, AppDelegate 中注册(下图1),回调是Flutter调用原生方法UserInfoMethod(下图2),然后原生result(tokenVO)回调给flutter当前登录用户的信息。

    MyFlutterBoostDelegate为重写代理方法(下图3),监听相互跳转方法然后进行操作。如图4,flutter要跳转原生页面,Delegate中监听到,根据参数“dms://fuchuang.com/UnBindWechat”进行相应跳转操作。

    (1)注册 (2)去原生获取token (3) (4)跳转到原生

            当然可以使用多个Channel进行操作,[FlutterBoost instance] sendEventToFlutterWith为向Flutter中传值。图6为flutter中接收。

    (5)另一个Channel (6)Flutter main函数进行通知接收

            IOS跳转到flutter页面,会走Delegate代理中的方法,然后根据PageName进行跳转flutter注册的路由,用BFFlutterVC进行包裹。

    IOS跳转Flutter页面 flutter注册路由

    相关文章

      网友评论

          本文标题:Native-Flutter混合开发 架构和使用

          本文链接:https://www.haomeiwen.com/subject/nshvcdtx.html