flutter 生成海报-[Flutter] Golden File Test 的原理

可以通过

(imgBytes)显示

近来闲暇时间一直在做Flutter,闪屏页是一个比较常见的需求,网上的闪屏页教程大部分是那种类似于广告页,而非iOS中的 LaunchScreen 性质的闪屏页.按照原来的方案我们要配置闪屏页的话,我们需要同时配置两端的闪屏页,那么有没有比较简单的方案来配置闪屏页呢? 毋庸置疑,当然是有了,那就是Flutter的插件 -

flutter_native_splash

. 接下来我们就来看一下具体应该怎么使用这个插件.

首先把 flutter_native_splash 导入到工程的

中.这里需要注意的是需要放在

dev_dependencies

下,而不是

dependencies

.具体如下所示.

接下来我们就来配置

flutter_native_splash

,在配置之前我们看一下

flutter_native_splash

的可配置项.

例如,我现在只有一个logo图片,那么我想生成iOS和android两端的闪屏页,这时候我只需在

如下设置即可.

当然了,如果你有其他配置可以自行进行添加.

配置完成了,我们该如何生成呢?这时候需要我们打开终端 cd 到我们的工程目录下.如果是Android Studio 或者 VSCode 默认就是在当前工程目录下.

然后我们需要执行下面的三个命令来生成闪屏页

每一次都敲三个命令实属麻烦,我们把上诉的三个命令整合成一个命令,如下所示.

那么,我们不想使用该插件生成的闪屏页该怎么办呢?我们只需要执行下面命令即可.

注:每一次更换图片都是需要重新执行命令重新生成.

OK,上面就是关于

flutter_native_splash

的使用全部内容,其实比较简单,如果需要定制化的,建议还是各自平台配置各自的闪屏页.如果有任何问题欢迎在评论区批评指导,感谢大家了.

测试的重要性就不在这里赘述了,本篇重点想聊一下Flutter的Widget测试(其他框架称为组件测试)中的Golden File test。

那么什么是Golden File Test呢?

Golden File Testing are like unit tests, except the expected output is stored in a separate file. -- Max Grigorev at ZuriHac

如果有前端经验的童鞋可以理解Flutter的Golden File Testing相当于Jest的快照测试。Flutter将期望的结果存储在图片文件(Golden Image)中。

Widget测试的目标是验证小部件的UI如预期那样的外观和交互。所以Golden File Testing 不等价Widget测试,但通过它可以很方便的测试Widget的UI是否如预期的外观一致。

Golden File Test怎么写,官方有很多例子,这里就不细讲。

和快照测试类似,工作流程如下:

在整个工作流程中,有3个关键点:

那我们接下来一个一个的看这三个问题。

生成和更新基线,Flutter提供了命令行:

flutter test --update-goldens

只跑某个测试文件可以指定文件路径:

flutter test --update-goldens <path_to_test_file>

不实用 --update-goldens 参数,会直接生成新的图片

通过它,可以在运行测试的同时,生成/更新图片。

理解以下内容,需要对Flutter 渲染流程及相关的概念有了解,此处赘述,如果不了解请移步

architectural-overview

element

render object

isRepaintBoundary , layer

scene

当测试在执行断言的过程:

根据需要,可以继承 LocalFileComparator 并复写的 compare 和 update 方法得到你想要的对比器,并通过 flutter_test_ 指定对比器。

了解Flutter Golden File Test的原理,可以帮组我们更好的去思考什么时候需要使用它。