MXFlutter Beta

新版本

【*NEW】MXFlutter Beta (0.1.0) Version 2020-03-30

  性能和稳定性优化，0.1.0版本已在iOS线上使用，Android的支持在开发中。

API变化：区分MXJSStatefulWidget、MXJSStatelessWidget
Framework目录整理
支持Packages
1. dio
2. pull_to_refresh
3. cached_network_image
4. shared_preferences
支持MessageChannel
性能和稳定性优化，Bug Fix

一、项目介绍
二、项目特性
三、核心**
四、项目架构
五、MXFlutter基本使用
六、项目效果UI展示
七、许可协议
八、参与贡献
九、团队介绍
十、联系我们

一、项目介绍

MXFlutter是一套基于JavaScript的Flutter框架，它用极类似Dart的开发方式，通过编写JavaScript代码，来开发Flutter应用。更多细节在基于JavaScript的Flutter框架详细介绍。

二、项目特性

支持Dart Flutter语法
支持定义Flutter中同名Widget类
支持定义相同的Build方式，SetState刷新及事件响应方法
支持js模块化开发
支持VS Code直接调试
支持模拟器页面热更新

把 Flutter 的渲染逻辑中的三棵树（即：WidgetTree、Element、RenderObject ）中的第一棵（即：WidgetTree），放到 JavaScript 中生成。用 JavaScript 完整实现了 Flutter 控件层封装，可以使用 JavaScript，用极其类似 Dart 的开发方式，开发Flutter应用，利用JavaScript版的轻量级Flutter Runtime，生成UI描述，传递给Dart层的UI引擎，UI引擎把UI描述生产真正的 Flutter 控件。所以，它在iOS上是完全动态化的。

关于MXFlutter动态化框架渲染、优化等更多详细细节介绍，请看文档：基于JavaScript的Flutter框架详细介绍。

四、项目结构

MXFlutter，就是用JavaScript，以Flutter的写法开发Flutter。具体的项目结构分为三层，请看下图：

1.VM层：

MXFlutter Runtime
定义和Flutter Widget同名镜像类
响应式UI框架

2.Flutter层：

Script脚本管理模块
DSL2Widget UIEngine，事件支持
Dart业务API支持
内存管理，对象生命周期管理

3.Native层：

VM虚拟机
线程管理
Native业务API支持

五、MXFlutter基本使用

1. Flutter侧，创建并启动MXJSFlutterApp

MXJSFlutter.getInstance().setup();
MXJSFlutter.getInstance().runJSApp(jsAppName: "app_test", pageName: null);

2. JS侧，编写MXJSWidget页面

class AppTest extends MXJSFlutterApp {
    constructor() {
        super("app_test", "initRouteName");
    }

    createJSWidgetWithName(pageName) {
        let w = new JSWidgetHomePage;
        return w;
    }
}

function main(pageName) {

    MXJSLog.log("main:pageName" + pageName);

    let app = new AppTest;
    runApp(app);
}

3.Flutter侧，进入MXJSWidget页面

Navigator.push(context, MaterialPageRoute(builder: (context) => MXJSFlutter.getInstance().navigatorPushWithPageName("JSWidgetHomePage")));

六、项目效果UI展示

先看看使用效果，以下截图是在MXFlutter框架下用JS开发，大家可以把上面的源码下载下来，里面有完整的JS代码示例：

单页面演示

下图是APP示例截图：

下面是UI截图对应的JS代码，没错，你没有眼花，这个是真的 JavaScript 代码，可以在 MXFlutter 的运行时库上渲染出 Flutter 的UI，（是不是很像Flutter里面的组件代码）！

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: 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: true,
      expandedHeight: _kAppBarHeight,
      actions: [
        IconButton({
          icon: new Icon(new IconData(1)),
          tooltip: 'Search',
          onPressed: function () {

          },
        }),
      ],
      flexibleSpace: LayoutBuilder({
        builder: function (context, constraints) {
          size = constraints.biggest;
          appBarHeight = size.height - statusBarHeight;
          t = (appBarHeight - kToolbarHeight) / (_kAppBarHeight - kToolbarHeight);
          extraPadding = new Tween({ begin: 10.0, end: 24.0 }).transform(t);
          logoHeight = appBarHeight - 1.5 * extraPadding;
          return Padding({
            padding: EdgeInsets.only({
              top: statusBarHeight + 0.5 * extraPadding,
              bottom: extraPadding,
            }),
            child: Center({
              child: new Icon(new IconData(1))
            }),
          });
        },
      }),
    });
  }

  buildBody(context, statusBarHeight) {

    let mediaPadding = EdgeInsets.all(0);
    let mq = MediaQuery.of(context);
    if (mq) {
      mediaPadding = MediaQuery.of(context).padding;
    }
    let padding = EdgeInsets.only({
      top: 8.0,
      left: 8.0 + mediaPadding.left,
      right: 8.0 + mediaPadding.right,
      bottom: 8.0
    });

    return new SliverPadding({
      padding: padding,
      sliver: new SliverGrid({
        gridDelegate: new SliverGridDelegateWithMaxCrossAxisExtent({
          maxCrossAxisExtent: _kRecipePageMaxWidth,
          crossAxisSpacing: 8.0,
          mainAxisSpacing: 8.0,
        }),
        delegate: new SliverChildBuilderDelegate(
          function (context, index) {
            let recipe = this.recipes[index];
            let w = new RecipeCard({
              recipe: recipe,
              onTap: function () { showRecipePage(context, recipe); },
            });

            return w;
          },
          {
            childCount: this.recipes.length,
          }),
      }),
    });
  }