【译】Flutter 延迟组件原理与自定义 【包体积优化 _ 动态化

延迟组件主要通过 dart 中的 loadLibrary() 调用来触发被下载、安装和加载。这个调用在 dart2js 和 aot/native 中的处理是不同的。这里,我们梳理 loadLibrary() 调用转换为一个延迟组件的安装过程:

dart 中 loadLibrary() 会调用的 native 层的 Dart_DeferredLoadHandler 函数,该回调函数在DartIsolate::Initialize 中由 Dart_SetDeferredLoadHandler 设置。Dart 在内部检索分配给库的加载单元 ID,并将其传递给回调函数。回调到 DartIsolate::OnDartLoadLibrary。

加载单元 ID 然后通过 runtime controller、engine 和 platform view 传递到 Android 嵌入层中的 FlutterJNI。这里,加载单元 ID 被传递到 DeferredComponentsManagerinstallDeferredComponent 方法中, ID 从一个整数映射为一个 String 名称,标识请求库所属的 pubspec 定义的延迟组件。这个转换由 AndroidManifest 中的 meta-data 映射,在构建阶段创建并验证。

之后 PlayStoreDeferredComponentManager 调用 API 下载 module。module 安装会定位到 .so 文件,并将路径传递给 engine 执行 dloopen。engine 将解析的符号发送到 dart isolate,以此将这些符号加载到 dart VM 中。整个加载过程必须与加载单元 ID 关联,否则 loadLibrary() 返回的 Future 对象不会完成。

请记住,多个加载单元可能包含在一个延迟组件中,但是 loadLibrary 只会从调用的特定 dart 库中加载 dart 符号。每个加载单元在使用前必须单独的调用 loadLibrary。对已经下载过的组件,后续调用 loadLibrary 不会二次加载,但是也并非同步完成,在调用和完成之间至少有一帧间隔。

通过延迟组件名称进行安装

我们还提供了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter 中,你可以使用自定义组件来创建树状图。下面是一个简单的示例: 首先,创建一个名为 `TreeNode` 的自定义组件,用于表示树的节点: ```dart class TreeNode extends StatelessWidget { final String title; final List<TreeNode> children; TreeNode({required this.title, required this.children}); @override Widget build(BuildContext context) { return Column( children: [ Text(title), SizedBox(height: 10), Column( children: children.map((node) => TreeNode(title: node.title, children: node.children)).toList(), ), ], ); } } ``` 然后,可以使用 `TreeNode` 组件来构建树状图。例如,假设我们有以下的树结构: ``` - Root - Node 1 - Leaf 1.1 - Leaf 1.2 - Node 2 - Leaf 2.1 - Node 3 ``` 可以使用以下代码来构建树状图: ```dart TreeNode root = TreeNode( title: 'Root', children: [ TreeNode( title: 'Node 1', children: [ TreeNode(title: 'Leaf 1.1', children: []), TreeNode(title: 'Leaf 1.2', children: []), ], ), TreeNode( title: 'Node 2', children: [ TreeNode(title: 'Leaf 2.1', children: []), ], ), TreeNode(title: 'Node 3', children: []), ], ); ``` 最后,将 `root` 组件放入 `build` 方法中的 `Widget` 树中进行渲染: ```dart @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Tree Example'), ), body: SingleChildScrollView( child: TreeNode(title: root.title, children: root.children), ), ); } ``` 这样,你就可以在 Flutter 应用中显示一个简单的树状图了。根据实际需求,你可以对 `TreeNode` 组件进行更多的自定义和样式调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值