flutter像素抖动,像素 抖动

Flutter性能优化

1.圆角对性能的影响

尽量避免用Clipxxx组件，建议用BoxDecoration的image属性实现，如果用Clipxxx组件，圆角取整后性能会提升。

2.减少重绘

根据场景合理使用RePaintBoundary，使绘制独立于父布局，避免重绘，提升性能，但过度使用增加的图层会带来Raster合成的耗时。例如scrollview是滑动过程会导致所有的节点都重绘，可以在scrollview下一层使用RePaintBoundary。

3.滚动步长插值器优化（了解）

官方的滚动差值器在出现小卡顿时，滚动步长会出现大的跳跃，导致体感上出现很明显的抖动，优化步长偏移量算法与原生效果对齐。

4.开启SurfaceView

官方推荐Flutter用SurfaceView ，因为SurfaceView与应用窗口内容分隔开，在专有硬件中合成，产生的中间副本少于TextureView，所以性能高，占用内存少，但是在混合栈遇到的问题需要突破

5.使用RepaintBoundary 提升频繁重绘控件的性能。使用RelayoutBoundary提升频繁修改大小，增删的布局中也可以提升性能。

6.build中不要去写大量的耗时逻辑，因为数据更新会触发build的多次调用，在里面做耗时逻辑会降低性能。

7.尽量使用statelessWidget代替statefulWidget，因为statefulWidget的销毁重建会引起子widget的销毁与重建。

8.解析json可以放到子线程线程中，开Isolate去解析，这样，当返回数据特别大的时候也不会阻塞界面。

9.使用不变的组件的时候可以添加const，const组件不会进行build更新

10.由于flutter通过widget.runtimeType和key来判断是否需要跟新组建，所以我们写组件的时候尽量保持key不变，或者不写key。对于一些需要频繁改变，例如新增、删除、排序的最好加上key。如果type一直，如果不写key容易导致，element无法区分新旧widget，导致无法更新。

相关问答

Q1: Flutter 开发笔记

下面这种情况下，为 InkWell 设置的 splashColor 不会生效：

需要用 Material 去除背景色，然后将颜色设置在 InkWell 外部：

在 Dialog builder 中使用 WillPopScope 禁用返回键返回：

注意：使用此方法同时也会禁用 iOS 上的手势滑动返回功能，推荐判断平台后再使用。

修改对话框中的复选框状态，最简便的方法是通过 Element 中的 markNeedsBuild 方法：

当然，更推荐的做法是通过 StatefulBuilder ，然后就可以在 Dialog 中调用 setState 方法了，不过在调用 setState 时需要判断 Dialog 是否已经关闭，否则会造成 setState() called after dispose() 的错误，可以通过添加一个标志位来解决，如下：

在 Web 中加载网络图片有时会失败，遇到这样的报错： Exception caught by image resource service... ，造成该错误的原因通常是，图片跨域了（见 跨域资源共享 ）。最简单的解决办法是， 使用 HTML 渲染加载 ，而不是默认的 CanvasKit。

Flutter 中所有的 list 默认都是没有 ScrollBar 的，必须使用 ScrollBar 组件。ScrollBar 组件通过监听 ScrollView 的 ScrollNotification 来刷新位置，所以 List 的长度必须是固定的。

当使用 WebView 等高度不定的组件时会出现内容被截断的情况，通常可以使用 NestedScrollView 来解决该问题，需要在 WebView 外部嵌套 SingleChildScrollView。

虽然使用了缓存，而且也是用 builder 加载图片的，但是发现一个现象：滑动屏幕后图片短暂消失并重新加载了。图片高度很高时这种现象更加明显，其原因是超出屏幕范围一定距离的组件被重新渲染了。解决方法是在 ListView 上设置 cacheExtent 参数:

该参数的作用是改变超出屏幕高度后继续渲染的范围（以像素为单位），比如设置成 9999 后意味着超出屏幕 10000 像素以内的内容都会被保留下来。

借助 IntrinsicHeight 组件：

另外，IntrinsicHeight 还可以用于 Dialog 或者 BottomSheet 中，使得其中的元素 显示内在元素的高度 ，从而避免元素因为约束的存在而不显示或者高度太高（比如在使用了 Column 或者 Row 的时候）。

在通过 Uri 的 queryParameters 获取 query 参数时，发现有些链接会抛出下面异常：

造成该异常的原因是 Uri 默认使用 utf-8 解码超链接字符串，如果链接中包含非 utf-8 字符，就会造成上面的错误，相关 issue 见： issue #31621 。目前该 issue 处于 open 的状态，暂时的解决办法是，在所有使用到 queryParameter 的地方用 try..catch 捕捉可能抛出的异常。

Flutter 开发非常依赖各种官方或第三方的插件，而在使用这些插件时多少都会遇到一些问题，大部分问题都可以通过搜索和查找 issue 来解决。这里记录下一些我在使用部分插件时遇到的问题及其解决方法。

目前该库没有图片加载完成的回调（见 issue #545 ），不过我们可以通过在 imageBuilder 中来添加回调：

这是一个应用内更新插件，安卓 10 以上安装时需要在 manifest 中添加以下内容：

目前功能最强大的 WebView 插件，基本能满足绝大部分移动端网页加载的需求，而且可定制化程度高。

一般通过 CookieManager 修改 Cookie，拦截请求并修改请求对象的 Header 不会生效。

InAppWebViewOptions 的 userAgent 只在 iOS 上生效，而 applicationNameForUserAgent 只在 Android 上生效，所以最好的做法是分平台设置 InAppWebViewOptions ，而且需要注意，由于设置 userAgent 后会覆盖默认的 UserAgent，所以如果需要在默认的 UserAgent 上添加其它参数，iOS 上需要通过 InAppWebViewController.getDefaultUserAgent() 获取默认 UserAgent 参数，而 Android 不需要添加。

如果图片源或者请求是 http 的，为了在 Android 上正常加载请求，必须在 AndroidInAppWebViewOptions 中将 mixedContentMode 设置为 AndroidMixedContentMode.MIXED_CONTENT_ALWAYS_ALLOW 。

当我们想要设置全屏图片的时候，由于默认的 Constraint 会将图片居中显示，所以图片四周会留有空隙。为了去除这个限制，我们需要 Xcode 中打开 LaunchScreen.storyboard，然后在 View Controller 的 View 和 LaunchImage 上的 Safe Area 去掉。

具体设置方法：右侧 Inspector 面板 Show the Size inspector 解选 Layout Margins 中的 Safe Area Relative Margins，拖动图片占满全屏，然后根据 View Controller Scene 的 Warning，更新 Constraint 就可以了。

在集成某些三方库之后，在使用命令行运行 iOS 模拟器的时候可能会遇到下面这个报错：

这是因为 iOS 模拟器未来将会兼容 arm64 架构，但是目前还不支持，所以我们需要修改 Build Setting 使得能够在 x86_64 的模拟器上运行，操作步骤见 这里 。

Q2: Flutter（6）：基础组件之Image

Image是一个用于展示图片的组件。支持 JPEG、PNG、GIF、Animated GIF、WebP、Animated WebP、BMP 和 WBMP 等格式。

Image.asset - 用于从资源目录的显示图片,需要在 pubspec.yaml 文件中声明。

Image.network - 用于从网络上显示图片。

Image.file - 用于从文件里显示图片。

Image.memory - 用于从内存里（Uint8List）显示图片。

alignment → AlignmentGeometry - 图像边界内对齐图像。

centerSlice → Rect - 九片图像的中心切片。

color → Color - 该颜色与每个图像像素混合colorBlendMode。

colorBlendMode → BlendMode - 用于 color 与此图像结合使用。

fit → BoxFit - 图像在布局中分配的空间。

gaplessPlayback → bool - 当图像提供者发生变化时，是继续显示旧图像（true）还是暂时不显示（false）。

image → ImageProvider - 要显示的图像。

matchTextDirection → bool - 是否在图像的方向上绘制图像 TextDirection。

repeat → ImageRepeat - 未充分容器时，是否重复图片。

height → double - 图像的高度。

width → double - 图像的宽度。

加载资源图片需要将图片资源放入工程中，例如：新建images文件夹，将图片放在该文件夹下，图片适配则是使用ios的方式1X，2X，3X：

然后在pubspec.yaml中配置assets：

加载资源/网络/本地文件图片/内存图片：

占位图加载图片：

圆形图片：1.裁剪实现 2.CircleAvatar实现 3.Container边框实现

圆角图片：1.裁剪实现 2.Container边框实现

BoxFit.contain 全图居中显示但不充满，显示原比例

BoxFit.cover 图片可能拉伸，也可能裁剪，但是充满容器

BoxFit.fill 全图显示且填充满，图片可能会拉伸

BoxFit.fitHeight 图片可能拉伸，可能裁剪，高度充满

BoxFit.fitWidth 图片可能拉伸，可能裁剪，宽度充满

BoxFit.scaleDown 效果和contain差不多， 但是只能缩小图片，不能放大图片

下一节学习基础组件之Text

Q3: Flutter_图片分辨率适配及批量拓展使用

flutter开发中，图片的引用是必不可少的，所以为了提高效率和精准度，我们需要对不同分辨率的手机使用相对应的切图图片，本章介绍如何进行 图片分辨率适配 和 图片批量拓展处理 。

flutter中会首先根据系统的devicePixelRatio（每一个逻辑像素包含多少个原始像素，可以通过MediaQueryData.devicePixelRatio来得到）来找对应倍数的文件夹下的图片，如果没有对应倍数，找最接近的。

所以在flutter项目中，我们需要构建对应的倍数像素文件夹

之后再pubspec.yaml中，配置assets文件后就可以使用了（如使用"assets/images/jay.png"，会自动适配该像素下最接近的jay图片）。

使用flutter-img-sync插件批量化处理，具体操作如下

目前还不能处理gif、webp等格式的图片，而且如果和上边介绍的不同像素比适配方案一起使用的话，由于进行了精准定位，所以指定图片后就不能进行像素适配，这是目前还存在的较大问题，所以目前两者方案只能暂时取一使用。

Q4: 什么叫抖晃率

Flutter（抖动）、Wow（晃动）、Drift（漂移）、Scrape Flutter（刮颤）是以移动介质为记录材料做模拟录制和回放的系统所需要面对的几种失真。这些失真是在录制、复制、回放过程中，由于记录介质的不规则的运动而导致的令人不快的频率调制所引入信号中的。抖晃率用于定量描述这种由于介质的运动速度不稳定所造成的频率晃动对人耳的主观影响。比如回放一个精准3150Hz的正弦信号，在理想的无抖晃的情况下，播放出来的信号就是3150Hz，然而在实际有抖晃的情况下，播放出来的信号的瞬时频率将围绕某个均值（不一定正好等于3150Hz）不断变动，就是说相对于那个均值有往复变化的频偏。

Drift（漂移）指的是信号中的频偏低于大约0.5Hz的频率调制。它给人的感觉是平均音调的缓慢变化。

Wow（晃动）指的是信号中的频偏范围为大约0.5Hz～6Hz的频率调制。它给人的感觉是音调的波动。

Flutter（抖动）指的是信号中的频偏范围为大约6Hz～100Hz的频率调制。它给人的感觉是声音品质的粗糙化。

Scrape Flutter（刮颤）指的是信号中的频偏高于大约100Hz的频率调制。它由磁带的粘连-滑动（粘滞）运动造成。它给人的感觉是声音中有噪音，而这种噪音在没有信号时是不存在的。这种噪音也称为摩擦噪音或粘滞噪音。

目前有多种抖晃率测试标准，例如：CCIR,DIN, NAB, JIS等，这里介绍的是基于AES（Audio Engineering Society）的AES6-2008(r2012)标准（就是2012年的最新修订版），它与IEC 60386、IEEE Std-193、CCIR 409-2和DIN 45507标准兼容。标准测试信号的频率定为3150Hz。当然用3000Hz的测试频率或其他的频率，这里介绍的方法也适用。

《摘自Multi-Instrument软件说明书》