![20e37c5ee9b5ad45579f40e15956dfbe.png](https://i-blog.csdnimg.cn/blog_migrate/45930e96de5071d50b182781f44ce0f2.png)
项目名称:MXFlutter
项目作者:MXFlutter Team
开源许可协议:MIT
项目地址:https://gitee.com/huoxd/MXFlutter
项目简介
MXFlutter 是一套基于 JavaScript 的 Flutter 框架,可以用极其类似 Dart 的开发方式,通过编写 JavaScript 代码,来开发 Flutter 应用,或者使用 mxjsbuilder 编译器,把现有Flutter 工程编译为JS,运行在 mxflutter 之上。
项目特性
- 支持Dart Flutter语法
- 支持定义Flutter中同名Widget类
- 支持定义相同的Build方式,SetState刷新及事件响应方法
- 支持js模块化开发
- 支持模拟器页面热更新
核心思想
把 Flutter 的渲染逻辑中的三棵树(即:WidgetTree、Element、RenderObject )中的第一棵(即:WidgetTree),放到 JavaScript 中生成。用 JavaScript 完整实现了 Flutter 控件层封装,可以使用 JavaScript,用极其类似 Dart 的开发方式,开发Flutter应用,利用JavaScript版的轻量级Flutter Runtime,生成UI描述,传递给Dart层的UI引擎,UI引擎把UI描述生产真正的 Flutter 控件。所以,它在iOS上是完全动态化的。
项目结构
MXFlutter,就是用JavaScript,以Flutter的写法开发Flutter。具体的项目结构分为三层,请看下图:
![0d761c8d7a79a11d51a59e3e51f58a33.png](https://i-blog.csdnimg.cn/blog_migrate/a121e75f460349ff610007bdc4fd566f.jpeg)
1.VM层:
- MXFlutter Runtime
- 定义和Flutter Widget同名镜像类
- 响应式UI框架
2.Flutter层:
- Script脚本管理模块
- DSL2Widget UIEngine,事件支持
- Dart业务API支持
- 内存管理,对象生命周期管理
3.Native层:
- VM虚拟机
- 线程管理
- Native业务API支持
项目效果 UI 展示
单页面演示
![d3236821b2153453d942aa3d8402f10a.png](https://i-blog.csdnimg.cn/blog_migrate/9e13ab9676fc3f09759eecc4ddc0660e.jpeg)
下面是UI截图对应的JS代码,没错,你没有眼花,这个是真的 JavaScript 代码,可以在 MXFlutter 的运行时库上渲染出 Flutter 的UI,(是不是很像Flutter里面的组件代码)!
class
如果你想要了解它更详细的使用和接入方法,那么就点击后面的链接前往项目主页看看吧:https://gitee.com/huoxd/MXFlutter