Flutter启动页白屏处理

4,563 阅读3分钟

前言

在上篇实现了一个Nike的加载页,但有一些遗留问题,其中之一就是启动时的白屏处理。如下:

pm.gif

启动页

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

安卓

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

image.png

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

image.png

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

image.png

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

image.png

iOS

打开下面文件,将LaunchImag.pngLaunchImag@2x.pngLaunchImag@3x.png替换为我们自己的图片即可。

image.png

虚假の示例

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

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

image.png

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

pml.gif

。。。

image.png

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

真正の示例

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

image.png

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

image.png

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

image.png image.png image.png

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

ppm.gif

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

image.png

6.最后看一下效果:

ppp.gif

完美 🎉🎉🎉

image.png

结语

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