真当Flutter不能热更新？就在刚刚！QQ团队开源动态化Flutter

最新推荐文章于 2024-07-17 14:28:57 发布

阿里P6+

最新推荐文章于 2024-07-17 14:28:57 发布

阅读量393

点赞数 3

分类专栏： 2024年程序员学习文章标签： flutter 开源

本文链接：https://blog.csdn.net/m0_55025322/article/details/136919236

版权

2024年程序员学习专栏收录该内容

252 篇文章 1 订阅

订阅专栏

下面是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: true,
expandedHeight: _kAppBarHeight,
actions: [
IconButton({
icon: new Icon(new IconData(1)),
tooltip: ‘Search’,
onPressed: this.createCallbackID(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,
}),
}),
});
}

源码中还有更丰满的示例，高仿知乎页面JSFlutter版 http://github.com/TGIF-iMatri… ，这是对应UI，已经接近在线上版直接使用了。

这个漂亮的知乎页面，是用Dart版转JS而来，在此鸣谢作者许吉友，大家可以关注一下他。

现状

MXFlutter虽然各个模块已相对完整，但投入生产还需要解决其中的BUG，由于19年初，小组启动新项目，非常繁忙，几乎没有时间继续开发，从3月份一直暂停，目前人力仍然很紧张，所以先放出技术方案和预览版代码，如果大家有兴趣，期待小伙伴们一起加入，共同丰富 MXFlutter 动态化能力。

0x00 分享下动态化探索过程中的几个炮灰方案

Flutter 动态化方案一：静态解析Dart语言，生成UI描述

Dart 本身是描述语言，IDE 的 Outline 工具可以解析 Dart 代码生成树形结构，我们可以利用其源码，生成 JSON UI 描述，相关代码：http://github.com/flutter/flu… dart-sdk: analysis_server

静态解析 Dart 缺点，不能写逻辑，对编写UI代码有很多限制，不能写判断语句，不能写函数，要支持这些成本很高。所以只好放弃。

快速介绍下Flutter的核心渲染模块三棵树

响应式UI框架

WidgetTree:Widget 里面存储了一个视图的配置信息，可以高效的创建（build）和销毁
Element 是分离 WidgetTree 和真正的渲染对象的中间层， WidgetTree 用来描述对应的Element 属性
RenderObject 来执行 Diff， Hit Test 布局、绘制

第一棵树有完整的UI描述信息，那么我只要JIT下通过 DartVM 创建第一棵树，其他耗时的操作都丢到AOT里去。

Flutter 动态化方案二：动态运行 Dart 语言，生产UI描述

和方案一静态解析Dart对比，第二个方案是写一个极其轻量的运行时库，让编写UI的Dart 代码运行了起来，生成树形结构，再序列化为 JSON（debug），FlatBuffers （release）UI 描述。可以称之为动态解析方案

具体渲染逻辑

架构也有了，方案也有了，要Run起来还有几个麻烦事要忙活，DartVM 要抽出来，Dart JIT层的轻量级运行时库，Dart AOT层把DSL转成真正Widget的UIEngin也要写哦，就是图中黄色和红色的三部分

抽离DartVM

无法简单修改编译条件抽离

Dart源代码在进行编译时会通过DART_PRECOMPILED_RUNTIME宏进行条件编译从而在Debug版编译JIT模式，Release版编译AOT模式。并且这两种模式是互斥的，无法同时存在。

简单的解决方法是

我们单独编译出一个DartVM，打包成动态库，修改导出符号，避免符合冲突

引入DartVM还需要的工作

开发DartVM与Native互通接口，参考了Flutter，使用Native Extension和Dart_Invoke实现互相调用
双DartVM调试方案，两个DartVM独立运行，通过远程端口单独调试DartFlutter
支持引入第三方库，DartFlutter在打包发布时会通过shell脚本分析.packages文件将依赖库自动打包随Dart File Zip一起随包下发。常用库可以预先打包的App本地，减少下发文件大小

一个暂时无法解决的问题

安装包过大，DartVM增大安装包30M，如果加上原本的AOT40M，整个Flutter安装包会增大到70M,用DartVM不现实。怎么办呢。

0x01 最终方案JavasSriptCore 替换DartVM

可性能分析

最后

其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

以上分享【我的阿里P7移动开发架构师学习笔记】七大模块整套学习资料均免费分享，需要的小伙伴，我已经上传到石墨文档了，大家自取就可以了。白嫖可以，别忘了给我点个关注哈。

当然我也为你们整理好了百度、阿里、腾讯、字节跳动等等互联网超级大厂的历年面试真题集锦。这也是我这些年来养成的习惯，一定要学会把好的东西，归纳整理，然后系统的消化吸收，这样才能极大的提高学习效率和成长进阶。碎片、零散化的东西，我觉得最没有价值的。就好比你给我一张扑克牌，我只会觉得它是一张废纸，但如果你给我一副扑克牌，它便有了它的价值。这和我们收集资料就要收集那些系统化的，是一个道理。

如果你需要，我把他放在GitHub了，无偿分享的。

【Android架构视频+BATJ面试专题PDF+学习笔记】