Flutter启动页白屏处理

前言

在上篇实现了一个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?)]

启动页

几乎所有App都会设计一个启动页，Flutter项目如果不做处理的话，在点开时都会有这个白色的闪屏。其实这个启动页在项目文件就可以进行更改。

安卓

1.打开AndroidManifes.xml文件,可以看到启动屏数据源指向了drawable中的launch_background。

2.打开drawable/launch_background文件，就会发现现在的启动页背景是白色。

3.若要设置图片样式的启动页，则需要将下面注释的内容放开。

4. 默认情况下是没有launch_image的，将启动页图片的名字设置为launch_image,然后放到drawable文件下，启动页就设置好啦。

iOS

打开下面文件，将LaunchImag.png、[email protected]、[email protected]替换为我们自己的图片即可。

虚假の示例

这里以之前完成的启动图为例来试一下效果。

1.首先随便掏出个画图软件做一张启动页图片：

2.然后将上面所说项目中的图片替换为我们自己的图片看下效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zVwRi1Am-1653629979784)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1046532feb3441b59dbbacf852370ba7~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

。。。

这是什么鬼,难道图片尺寸必须跟屏幕保持一致才可以吗… 非也，其实用这种方式设置启动图并非上策，因为不同尺寸的屏幕间很难做适配，特别是示例中需要启动页中的logo与启动页消失后的logo大小保持一致的情况，所以需要尝试其他方法：

真正の示例

1.以iOS为例，使用Xcode打开项目，在Asset中我们看到了刚才拖入的图片。

2.点击LaunchScreen，这是iOSApp启动时展示的屏幕窗口，可以看到我们拖入的图片展示在一个imageView中。

3.那如果把LaunchImage的约束重新设置一下呢

4.再来看一下效果，这次似乎像那么回事儿了，但还是能发现logo大小不一样的情况（虽然这是我随手做的一张启动页图片，但既然我们的需求是根据代码，让启动页在所有屏幕上的显示效果都一样的话就不该止步于此）。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JDOWDuUa-1653629979786)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f618c5e87a3949d987c4765575b95ad1~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

5.终极解决方案：设置背景底色，为盛放logo的imageView设置约束(在上一篇文章中，我们设置logo的初始大小为屏幕宽度的1/3，位置为屏幕的中心)，那么我们为imageView设置同样的约束，然后就有了⬇️

6.最后看一下效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MYvToRMM-1653629979787)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/30446377819447cf8ae9dac91fee5e8e~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

完美

结语

最后说一些题外话吧，其实看过苹果的App设计规范就会了解到，其实启动页被设计的初衷就是起一个过渡的作用，让用户在使用感受上不回觉得太过突兀，比如iOS系统自带的天气app，启动页只是一张简单的渐变图片，是不建议添加产品Logo或者其他一些花里胡哨的广告的，否则审核有可能会因此被拒，大家随手打开几个App感受下就不难发现，会这样做的产品少之又少，在不知不觉中就被消费了体验，也许是已经习惯了。不过毕竟咱也不是产品，在下随口说说，诸君随意听听就好