flutter进入下一帧，flutter 掉帧

Flutter浪潮下的音视频研发探索

大家好，我是阿里巴巴闲鱼事业部的陈炉军，本次分享的主题是Flutter浪潮下的音视频研发探索，主要内容是针对闲鱼APP在当下流行的跨平台框架Flutter的大规模实践，介绍其在音视频领域碰到的一些困难以及解决方案。

fijkplayer 是一个 Flutter 生态的媒体播放器，是对 ijkplayer 的 Flutter 封装，支持 Android 和 iOS。

如果需要实现视频通话功能可以直接用第三方的SDK。比如ZEGO Flutter SDK 就可以快速轻松的构建一个跨平台音视频聊天应用，大大降低开发成本，适合想要快速完成多端共用音视频项目的开发者。

作者：闲鱼技术－国有 国有，闲鱼架构团队负责人。在7月13号落幕的2019年Archsummit峰会上就近一年来闲鱼在Flutter&FaaS一体化项目上的 探索 和实践进行了分享。随着无线，IoT的发展，5G的到来，移动研发越发向多端化发展。

相关问答

Q1: Widget总结

1、总结：非常不建议Widget需要动画或者调用传感器展示，在部分手机上会提示耗电异常，强制杀死程序。进程保活：进程保活涉及到的问题非常复杂，且越来越严格。测试了三款APP：顺历：清除后台任务后Widget时间停止更新。

2、主屏幕主要变化的另一个体现是添加了小工具功能。微件可以在负屏中长按拖拽到主屏使用。我们也可以长按屏幕空白处，进入屏幕编辑模式，点击右上角的加号，进入widget选择页面，根据自己的需求选择widget。

3、iOS 3D Touch iOS 小组件(widget)音量提示当用户沉浸在Feed流中观看短视频并进行音量调节时，iOS默认的音量条会对内容遮挡影响观看体验。

4、操作/步骤 1 主界面向右滑动屏幕 苹果手机的主界面，向右滑动屏幕。2 找到并点击编辑 点击编辑按钮。3 点击app+号添加 将常用的app，直接点击app前面的+号添加即可。

5、.乍一看，传参类型和接受类型是一致的，但是传参类型里面多个Function()，所以只能是不抽取方法，直接定义list，直接添加。不在报错。总结： dart语言的function返回值应该都是带function的。和直接定义的类型是不同的类型。

6、a.注意：UserWidget没有SetPosition方法，虚幻的SetPosition方法是写在CanvasPanelSlot类中的， 为了便于使用，在BaseWindow类的层面封装SetPosition方法。

Q2: Flutter图片加载与缓存

配合实现图片缓存， ImageProvider 从数据源加载完数据后，会在 ImageCache 中缓存图片数据，图片数据缓存时一个 Map ，其中 Map 中的 key 便是 obtainKey 。

Flutter的图片缓存机制有问题（可能是我使用的版本113有问题）网络图片会默认缓存到本地，但是不管图片是不是完整的或者损坏的，导致页面在下次进入的时候会优先从缓存里读取图片。

Image（图片组件）是显示图像的组件，一个显示图片的widget，支持图像格式：JPEG，PNG，GIF，动画GIF，WebP，动画WebP，BMP和WBM 构造方法 Image： 从ImageProvider获取数据 Image.network： 加载网络图片。

使用 cached_network_image 加载网络图片时，遇到 sharedmem_gpumem_alloc： mmap failed errno 12 Out of memory ，然后app会闪退。

网页是https链接，其中混用了http的图片，会导致无法加载。

Q3: Android图形渲染原理上

CPU负责计算需要渲染的数据，把计算好的数据交给GPU，GPU会对图形数据进行渲染，渲染好后放到buffer(图像缓冲区)里存起来，然后Display（屏幕或显示器）负责把buffer里的数据呈现到屏幕上。

：于 alpha、transform 之类的属性是如何实现的，这个说简单也不简单，说复杂也不复杂，实际上很多 2D 图形渲染库都能很轻易实现这些。

让我继续介绍一下，在硬件渲染中native层的核心对象。 如下是一个思维导图： 有这么一个大体印象后，就不容易迷失在源码中。

手机中的“强制进行GPU渲染”的意思如下：GPU是图形处理器，启用Gpu渲染加速，就是调用GPU加速图形的渲染和填充。开启GPU渲染加速后可以提升图形加载速度，降低CPU处理器的负担，使系统运行更加流畅，但是也更加耗电。

渲染缓冲对象(RBO) 是一种图像表面，它是专门为了绑定到 FBO 而设计的。它可以是一个颜色表面、模板表面、或者深度/模板组合表面。也是一个缓冲，它可以是一堆字节、整数、像素或者其他东西。

Flutter在Android平台上也是直接渲染到Surface。例如：一个Activity/Dialog都是一个Surface，它承载了上层的图形数据，与SurfaceFlinger侧的Layer相对应。Canvas（画布）实现由 Skia 图形库提供。

Q4: Flutter:快速创建简单闪屏页

1、万物始于 Hello World，我们先来创建一个显示 Hello World 的 Flutter 项目。 在Android Studio 的欢迎页面选择 Start a new Flutter project ，或者通过菜单栏的 File New New Flutter Project ，创建一个新的 Flutter 项目。

2、这种方法类似于iOS中的set方法，通过设置某个属性的时候，去刷新某个控件。在flutter中这种刷新方式，是对上面setState(){}方法的改进，根本的方法还是setState(){}，只不过是通过方法去刷新某个控件。

3、以下是使用flutter_bloc的一些步骤： 安装RxDart库：BLoC使用RxDart库中的StreamController和Stream来实现。因此，需要安装RxDart库。 创建BLoC类：创建一个BLoC类来处理业务逻辑。

4、简要来说，Flutter 是一个移动 SDK ，允许我们创建跨平台移动应用（这样你就可以编写一份代码，在 Android 和 iOS 都可以运行这个应用程序）。

5、建立一个flutter项目的命令 在ios文件夹下，生成pods文件夹 Xcode环境签名设置；把错误的版本删除再添加，可解决签名错误问题；必须先删除再添加，直接修改可能不起作用。团队开发，必须使用团队的签名。

flutter进入下一帧的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于flutter 掉帧、flutter进入下一帧的信息别忘了在本站进行查找喔。