flutter ios启动白屏_Flutter技术架构概览

最新推荐文章于 2024-04-02 17:52:41 发布
最新推荐文章于 2024-04-02 17:52:41 发布
阅读量144 收藏
点赞数
文章标签： flutter ios启动白屏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_35645813/article/details/112226411
版权

0bf96809d93a44cedff9237214f590da.png

前言

最近在整理各种技术架构，给自己的列了个TODO list，希望能在几个月的时间内，研究完各种前端技术架构，包括移动端技术架构。今天分享一下自己整理的flutter技术架构。完整的技术架构TODO list可以去我的github仓库查看，持续更新中，敬请期待，同时祝大家圣诞节快乐。。。

大前端技术架构Github仓库(https://github.com/Cosmos-Front-end/tech-architecture)

Flutter技术架构概览

0c6f356661c6cb92a659e1e2b2811719.png

Flutter技术架构概览

Embedder是一个嵌入层，即把Flutter嵌入到各个平台上去，这里做的主要工作包括渲染Surface设置，线程设置，以及插件等。 从这里可以看出，Flutter的平台相关层很低，平台(如iOS)只是提供一个画布，剩余的所有渲染相关的逻辑都在Flutter内部，这就使得它具有了很好的跨端一致性

  • Engine 是Flutter的核心，它主要是用C++编写的，并支持所有Flutter应用程序所必需的原语。每当需要绘制新界面时，引擎负责对合成场景进行栅格化。它提供了Flutter核心API的低级实现，包括图形(通过Skia)，文本布局，文件和网络I / O，可访问性支持，插件架构以及Dart运行时和编译工具链

  • Framework使用dart实现，包括Material Design风格的Widget, Cupertino(针对iOS)风格的Widgets，文本/图片/按钮等基础Widgets，渲染，动画，手势等。此部分的核心代码是: flutter仓库下的flutter package，以及flutter/engine仓库下的io, async, ui(dart:ui库提供了Flutter框架和引擎之间的接口)等package

Flutter编译产物

473db80ad1c54658981c05343e409856.png

Flutter引擎启动

cb14706a2255dfb2e4f39e35d60786f1.png

引擎启动过程

  • FlutterApplication.java的onCreate方法完成初始化配置，加载引擎libflutter.so文件，注册JNI(Java Native Interface，Java本地接口)方法

  • FlutterActivity.java的onCreate过程，通过Flutter JNI的AttachJNI方法来初始化引擎Engine、Dart虚拟机、isolate线程、taskRunner等对象。再经过层层处理最终调用main.dart中的main()方法，执行runApp(Widget app)来处理整个Dart业务代码

Flutter引擎中的TaskRunner

TaskRunner原理

Flutter引擎启动过程中，会创建UI线程，GPU线程和IO线程，Flutter引擎会为这些线程依次创建MessageLoop对象，启动后处于epoll_wait等待状态。

8dc6482515046a6d09bbd114ee26840d.png

Flutter任务队列分为event queue(事件队列)和microtask queue(微任务队列)，事件队列包含所有的外部事件，如Flutter引擎和Dart虚拟机的事件以及Future。Dart层执行 scheduleMicrotask() 所产生的属于Microtask微任务。从上面的流程图可以看出，当main()执行完了之后，事件循环就开始工作。首先，它会以FIFO的顺序，执行所有的微任务。然后事件队列的第一项任务第一项出队并开始处理。然后重复该循环：执行所有的微任务，然后处理事件队列的下一项。

四个TaskRunner

e6b05ba37d3b76754a8c202fe2a12cc7.png

  • Platform Task Runner: 运行在Android或者iOS的主线程，尽管阻塞该线程并不会影响Flutter渲染管道，平台线程建议不要执行耗时操作；否则可能触发watchdog来结束该应用。比如Android、iOS都是使用平台线程来传递用户输入事件，一旦平台线程被阻塞则会引起手势事件丢失

  • UI Task Runner: 运行在ui线程，比如1.ui，用于引擎执行root isolate中的所有Dart代码，执行渲染与处理vsync信号，将widget转换生成Layer Tree。除了渲染之外，还有处理Native Plugins消息、Timers、Microtasks等工作

  • GPU Task Runner: 运行在gpu线程，比如1.gpu，用于将Layer Tree转换为具体GPU指令，执行设备GPU相关的skia调用，转换相应平台的绘制方式，比如OpenGL, vulkan, metal等。每一帧的绘制需要UI Runner和GPU Runner配合完成，任何一个环节延迟都可能导致掉帧

daa8b4dd6f9c3b30a37fb1f084c9323b.png

GPU渲染流程

  • IO Task Runner: 运行在io线程，比如1.io，前3个Task Runner都不允许执行耗时操作，该Runner用于将图片从磁盘读取出来，解压转换为GPU可识别的格式后，再上传给GPU线程。为了能访问GPU，IO Runner跟GPU Runner的Context在同一个ShareGroup。比如ui.image通过异步调用让IO Runner来异步加载图片，该线程不能执行其他耗时操作，否则可能会影响图片加载的性能

Dart虚拟机工作

Flutter引擎启动会创建Dart虚拟机以及Root Isolate。DartVM自身也拥有自己的Isolate，完全由虚拟机自己管理，Flutter引擎无法直接访问。Dart的UI相关操作，是由Root Isolate通过Dart的C++调用，或者是发送消息通知的方式，将UI渲染相关的任务提交到UIRunner执行，这样就可以跟Flutter引擎相关模块进行交互。

什么是Isolate? Isolate是Dart平台对线程的实现方案，但和普通Thread不同的是，Isolate拥有独立的内存， Isolate由线程和独立内存构成。正是由于isolate线程之间的内存不共享， 所以Isolate线程之间并不存在资源抢夺的问题，所以也不需要锁。

b817fdf1f7f1c239d22dd718510fa932.png

Flutter虚拟机架构

Flutter Widget

StatelessWidget：内部没有保存状态，UI界面创建后不会发生改变

StatefulWidget：内部有保存状态，当状态发生改变，调用setState()方法会触发StatefulWidget的UI更新，对于自定义继承自StatefulWidget的子类，必须要重写createState()方法

7bfdade47bd7e1de3ef486d669a32cd1.png

Flutter Widget

关于Flutter组件的渲染和布局，推荐阅读官方文章 Flutter组件渲染和布局原理

Platform Channels

8795f57722d413828d03774114549ad3.png

Flutter Platform Channels

Flutter提供了Platform Channels来允许开发者调用安卓和iOS原生代码，是一个用于Dart代码和原生应用程序之间进行通信的简单机制。通过创建一个通用的Channel(通道)，你可以在原生代码(例如Swift，Kotlin)和Dart之间直接发送和接收消息。Dart的(例如Map)数据类型会经过序列化为标准格式，然后反序列化为Kotlin(例如HashMap)或 Swift(例如Dictionary)的等效表示形式。

Flutter Platform Channels官方解读

? 学习更多

  • Flutter通用开发模板(https://github.com/chachaxw/flutter_common_template)

  • Flutter 跨平台演进及架构开篇(http://gityuan.com/flutter/)

  • 深入理解Flutter多线程 (https://juejin.cn/post/6844903831478730759)

  • 为追求高性能，我必须告诉你Flutter引擎线程的事实(https://flutter.dev/docs/resources/architectural-overview)

  • Flutter architecture overview(https://flutter.dev/docs/resources/architectural-overview)

  • The Event Loop and Dart(https://web.archive.org/web/20170704074724/https://webdev.dartlang.org/articles/performance/event-loop)

一只御姐姐
关注
Flutter 启动页白屏设置/启动画面设置
01-03
新建flutter项目 刚启动是有段时间的白屏 ,这个是系统开机的白屏,可以更换成自己的启动画面,设置如下: launch_backgroud.xml里修改成自己的图片名称,src表示图片的名称不带扩展名，mipmap表示对应各种分辨率下的图片 launch_background.xml文件 <!-- --> 设置全屏图片 styles.xml 文件 false true @mipmap/launcher 这么设将是图片全屏 ,应用有顶部状态栏,windowfullscreen设为tr
走近科学，探究阿里闲鱼团队通过数据提升Flutter体验的真相
weixin_34189116的博客
04-29 132
背景闲鱼客户端的flutter页面已经服务上亿级用户，这个时候Flutter页面的用户体验尤其重要，完善Flutter性能稳定性监控体系，可以及早发现线上性能问题，也可以作为用户体验提升的衡量标准。那么Flutter的性能到底如何？是否像官方宣传的那么丝滑？Native的性能指标是否可以用来检测Flutter页面？下面给大家分享我们在实践中总结出来的Flutter的性能稳定性监控方案。目标过度的丢...
flutter ios启动白屏_Flutter Android端启动白屏问题的解决
weixin_39943547的博客
12-20 358
问题描述Flutter 应用在 Android 端上启动时会有一段很明显的白屏现象，白屏的时长由设备的性能决定，设备性能越差，白屏时间越长。问题分析其实启动白屏的问题在Android原生应用上也是一个常见问题，大致是因为从用户点击 Launcher Icon 到应用首页显示之间，Android 系统在完成应用的初始化工作，其流程如下：在 Flutter Android 端上，白屏的问题会更加严重，...
flutter ios启动白屏_Flutter解决启动页面白屏黑屏问题
weixin_39849387的博客
12-20 507
1、在配置文件下的Activity之间加入：android:name=".MainActivity"android:launchMode="singleTop"android:theme="@style/LaunchTheme"android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSi...
IOS工程Flutter白屏
lfdanding的专栏
09-30 651
今天编译IOS工程的时候，Flutter页面白屏，经过多方定位无果，在启动日志里面看到 Can’t load Kernel binary: Invalid kernel binary format version.如下错误，通过文章 Can’t load Kernel binary: Invalid kernel binary format version.解决 重新配置Flutter环境即可 参考文章 1、https://flutter.dev/docs/development/tools/sdk/rel
解决Flutter启动页白屏问题，flutter启动显示图片
05-29
启动页是App必不可少的一部分，然而在一个新创建的Flutter项目中，运行发现是没有启动页的。 Android原生的白屏问题可以通过为 Launcher Activity 设置 windowBackground 解决，而 Flutter 也是基于此办法，同时优化...
flutter_bluetooth.zip_flutter 蓝牙 ios_flutter_bluetooth_flutter获取
07-14
flutter 蓝牙，通过蓝牙协议和单片机进行数据交互，控制智能硬件
flutter_local_notifications：一个Flutter插件，用于在Android，iOS和macOS上显示本地通知
01-29
大多数开发人员都在这里，因为他们希望使用flutter_local_notifications插件。 每个目录中都有一个自述文件，其中包含更多信息。 问题 如果遇到错误，请在GitHub存储库上提出它们。 请不要通过电子邮件将它们发送给...
flutter_app_badger:支持更新启动器上的应用程序徽章（适用于Android和iOS）
05-05
Flutter App Badger插件 此插件增加了在启动器中更改应用程序徽章的功能。 它支持iOS和某些Android设备（即使在Oreo上，官方API也不支持该功能）。 入门 的iOS 在iOS上，需要通知权限才能更新徽章。 会自动询问...
flutter_inapp_purchase
03-25
flutter_inapp_purchase Flutter V2 该软件包与4.0.0 flutter v2兼容。 对于使用旧版本的用户，请使用< 4.0.0 。 太阳升起 :sunrise: 由于你们中的许多人都希望我在继续使用此插件，因此我决定继续从事当前项目...
Flutter Android端启动白屏问题的解决
08-27
Flutter 应用在 Android 端上启动时会有一段很明显的白屏现象，白屏的时长由设备的性能决定，设备性能越差，白屏时间越长。这篇文章主要介绍了Flutter Android端启动白屏问题的解决。感兴趣的小伙伴们可以参考一下
Flutter的Android和iOS启动页白屏解决
weixin_43885334的博客
02-17 1998
flutter的Android与iOS白屏解决方式
Flutter启动页白屏处理
郊眠寺
05-27 3204
前言 在上篇实现了一个Nike的加载页，但有一些遗留问题，其中之一就是启动时的白屏处理。如下： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vX0WOEA6-1653629979782)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f5f2aadf7f2b43a78d5957c761515c8a~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)] 启动页 几乎所有
Flutter架构
大灰狼的小绵羊哥哥的博客
05-27 477
面试官:你有用过Flutter吗? Flutter架构是怎么样，为什么会比其他如ReactNative好 心理分析：面试官所在的项目是用Flutter 开发的，或者正在转Flutter这种技术。如果你不会，面试官在第一眼会认为后面来应聘的人或许会、为了杜绝这种情况发生，你一定要说以前研究过，写过相关代码。其实”有用过Flutter“对大多数求职只是 会与不会 的问题。这不是面试官 想了解的。面试官的重点 你了解的有多深。 接下来，会问你他的原理 你是怎么看。 它的优缺点。为什么比其他的好。从原理层来解析
【Flutter入门到进阶】Dart进阶篇---DartVM单线程设计原理
Yvan
02-19 1405
像常规Intel ARM AMD这些芯片能够支持比较多的操作，因为一般他们的线路设计都是32以上像单片机这种，最便宜的单片机可能在线路上的设计是8。
Flutter3.0 性能优化系列|一文教你完全掌握内存优化和dark虚拟机 (内存泄露)
最新发布
datian1234的博客
04-02 1265
1). dart代码都会映射c++中对应的方法2). 对象存放在 WeakPersitentHandle中3). 根据渲染原理: 通过检测渲染树节点数量来检测内存泄漏, 对比当前帧使用的EngineLayer个数，如果内存中的EngineLayer个数长时间大于使用的个数4). 通过WeakPersitentHandle找到调用链内存泄露工具: (重点分析)内存泄露具体代码总结:1. 弱引用Expando2. 解决访问的私有属性Dart vm_service3. 判断内存泄露。
译-Dart虚拟机入门(Introduction to DartVM)
farmer_cc的专栏
05-12 1060
原文地址：https://mrale.ph/dartvm/ 发现一篇2019年的译文：https://annatarhe.github.io/2019/01/31/introduction-to-dart-vm.html，部分中文专有名词摘自该译文 备注： 原文仍在处在修改状态， 翻译此文时，原文最后修改时间为2020年1月29日 本文的目标：本文的目标是作为DartVM 开发的参考手册， 供新团队成员、潜在的外部贡献者、或者其他任何对VM内部原理感兴趣的人。 本文从介绍DartVM 简...
Dart VM 的相关简介与运行模式解析，rrxjava原理
m0_66264533的博客
01-22 796
VM 中 的任何 Dart 代码都在某个 isolate 中运行，可以将其描述为：具有自己的内存（堆）并且通常具有自己的控制线程（mutator 线程）的 Dart 隔离宇宙。 VM 可以有许多 isolate 同时执行 Dart 代码，但它们不能直接共享任何状态，只能通过端口传递消息进行通信（不要与网络端口混淆！）。 这里的 OS 线程和 isolate 之间的关系有点模糊，并且高度依赖于虚拟机嵌入到应用程序的方式，但是主要需要保证以下内容： 一个 OS 线程一次只能进入一个 isolate ，如果它.
Flutter iOS使用Firebase_Messaging接受推送通知，给出完整代码
06-09
好的，下面是使用Firebase_Messaging接收推送通知的完整Flutter iOS代码： ```dart import 'package:firebase_core/firebase_core.dart'; import 'package:firebase_messaging/firebase_messaging.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; void main() async { WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp(); runApp(MyApp()); } class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { final FirebaseMessaging _firebaseMessaging = FirebaseMessaging.instance; @override void initState() { super.initState(); _firebaseMessaging.requestPermission(); _firebaseMessaging.configure( onMessage: (Map<String, dynamic> message) async { print("onMessage: $message"); showDialog( context: context, builder: (context) { return AlertDialog( content: ListTile( title: Text(message['notification']['title']), subtitle: Text(message['notification']['body']), ), actions: <Widget>[ FlatButton( child: Text('Ok'), onPressed: () { Navigator.of(context).pop(); }, ), ], ); }, ); }, onResume: (Map<String, dynamic> message) async { print("onResume: $message"); }, onLaunch: (Map<String, dynamic> message) async { print("onLaunch: $message"); }, ); } @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Firebase Messaging', home: Scaffold( appBar: AppBar( title: Text('Flutter Firebase Messaging'), ), body: Center( child: Text('Welcome to Flutter Firebase Messaging'), ), ), ); } } ``` 在这个例子中，我们首先使用Firebase.initializeApp()初始化Firebase应用程序，然后创建FirebaseMessaging实例并调用requestPermission()请求权限。接下来，我们使用configure()方法配置FirebaseMessaging以处理不同的消息事件。当应用程序处于前台时，onMessage()方法被调用，我们在这里创建一个AlertDialog来显示推送通知的标题和正文。当应用程序处于后台或未运行时，onResume()和onLaunch()方法被调用，我们可以在这里处理推送通知。 希望这个例子能够帮助你使用Firebase_Messaging接收推送通知。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值