基于 JS 的高性能 Flutter 动态化框架 MXFlutter.pdfVIP

基于JS 的高性能Flutter 动态化框架MXFlutter 基于JS 的高性能Flutter 动态化框架 可能是目前放出来的相对最完整的Flutter 动态化方案 缘起：18 年10 月份，我们团队的iOS 产品尝试引入Flutter，做为iOS 开发，一 接触到Flutter 就马上感受到，Flutter 虽然强大，但不能动态化是阻碍我们使用她 的唯一障碍了。舍弃Native 的开发方式，一个很大的诉求是获取动态更新的能 力。看Google 团队对动态化的措辞，应该指望不上了，撸起袖子自己动手丰衣足 食。 简介 项目代号：MXFlutter （Matrix Flutter） 核心思路是把Flutter 的渲染逻辑中的三棵树中的第一棵，放到JavaScript 中生 成。用JavaScript 完整实现了Flutter控件层封装，可以使用JavaScript，用极其类 似Dart 的开发方式，开发Flutter 应用，利用JavaScript 版的轻量级Flutter Runtime，生成UI 描述，传递给Dart 层的UI 引擎，UI 引擎把UI 描述生产真正的 Flutter控件。所以，他在iOS 上是完全动态化的，完整代码在github： 如果能帮助到大家，请给MXFlutter 点个Star，给我们有动力继续更新下去^_*， 也让整个Flutter 社区都能了解到我们中国开发者的贡献。github TGIF-iMatrix MXFlutter 继续前先瞥一眼整体的架构，一句话介绍MXFlutter，就是用JavaScript，以 Flutter 的写法开发Flutter。汗...还是有点绕，大家看下面贴出来的代码吧。 效果 先看看使用效果，以下截图是在MXFlutter 框架下用JS 开发，大家可以把上面的 源码下载下来，里面有完整的JS 代码示例： 这个是APP 示例截图 UI JS JavaScript 下面是 截图对应的 代码，没错，你没有眼花，这个是真的 代码， 可以在MXFlutter 的运行时库上渲染出Flutter 的UI class JSPestoPage extends MXJSWidget { constructor() { super(JSPestoPage); this.recipes = recipeList; } build(context) { let statusBarHeight = 24; let mq = MediaQuery.of(context); if (mq) { statusBarHeight = mq.padding.top } let w = new Scaffold({ appBar: new AppBar({ title: new Text(Pesto Demo) }), floatingActionButton: new FloatingActionButton({ child: new Icon(new IconData(0xe3c9)), onPressed: this.createCallbackID(function () { }), }), body: new CustomScrollView({ semanticChildCount: this.recipes.length, slivers: [ //this.buildAppBar(context, statusBarHeight), this.buildBody(context, statusBarHeight), ], }), //body:this.buildItems()[0] }); return w; } buildAppBar(context, statusBarHeight) { return SliverAppBar({ pinned: tru