flutter-android、ios启动图设置

3,274 阅读1分钟

前言

学会了flutter,可是我们首屏加载时有短暂的白屏怎么办,这里就是因为原生端的启动图没有设置的问题,我们只需要在分别在androidios端设置好启动图即可,这样就可以解决默认的白屏问题

另外如果想动态加载自己的活动启动图之类的,可以在flutter的第一个页面加载

ios启动图设置

ios端,需要下载 xcode,然后如下图所示,先将图片加入到资源库 Assets

image.png

然后打开 LaunchScreen.storyboard,如下图所示,启动图的图片应用到这里,前面加入图片后,这回就会显示,右边设置 的名字就是 LaunchImage,由于手机的型号分辨率等不同,推荐启动图有效区域在中心一小部分(如果背景图是非统一色调,可以调整布局,设置图片的 ContentModelaspect Fill, Fit一些机型会有白边)

image.png

android启动图设置

androidios差不多,启动图也是到了一个 xml 文件中,我们将图片放到res下面的mipmap文件夹中,如下图所示

image.png

注意:有时图片和手机尺寸不对付,我们可以将 gravity设置成 fill即可,这样可以填充满屏幕,如果还想其他手段,可以查看一下 gravity的其他属性

android dpi介绍

看了前面的启动图,这里可能异或或怎么这么多的 mipmap文件夹,我们的图片应该怎么放合适

mdpi: 默认的 1x 图片

hdpi: 1.5x图片

xhdpi: 2x图片

xxhdpi: 3x图片

xxxhdpi: 4x图片