第一百四十一回如何添加程序启动页-优快云博客

本文链接：https://blog.youkuaiyun.com/talk_8/article/details/132819612

文章目录

概念介绍
实现方法
- IOS平台
- Android平台
经验分享

我们在上一章回中介绍了如何解决BLE包中的错误的内容，本章回中将介绍 如何添加程序启动页.闲话休提，让我们一起Talk Flutter吧。

概念介绍

程序启动页就是点击手机桌面上的程序启动图标后显示的页面，也叫splash页面，我们在前面章回中介绍过相关的内容，并且给出了解决方案，不过我发现这个方案不好用。如果按照这个方案添加启动页面的话，会首先显示一个白色的页面，然后才是我们方案中添加的页面。这个白色的页面就是程序启动页，它是在Flutter程序页面加载第一帧前运行的。Flutter在设计时把程序启动页设计在了原生端，因此只能使用原生开发的方式实现程序启动页面。本章回中详细介绍添加程序启动页的方法。

实现方法

在Flutter中添加启动页以原生开发的方式进行，因此我们分别介绍Android和IOS两种开发平台上的实现方法。

IOS平台

在IOS平台上添加启动页比较方便，只需要在sotryboard中的LauncherScreen中添加启动页面的内容就可以，而且的启动和运行流程不需要我们去关注。启动页中显
示的内容的布局和其它StoryBoard中的页面布局处理方式完全相同，我在这里就详细介绍了。我对这种方法做一个总结：IOS提供了一个模板，开发者只需要给对着模板
做一个启动页就可以，其它的事件平台会自动处理，我称之为模板式开发。

Android平台

在Android平台上添加启动页需要自己动手实现，不过在Andorid12之后官方也推出了启动页库.我们只需要在布局文件中添加图片和配色就可以实现启动页，这种方式
类似IOS的模板式开发。下面我们详细介绍一下添加启动页的方法。

打开资源文件launch_background.xml，文件们于Android目录下的res/drawable目录下;
在文件中的item中添加启动页中的图片和背景色，详细代码如下：

<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="?android:colorBackground" />

    <!-- You can insert your own image assets here -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/ic_launcher" />
    </item>
</layer-list>

从代码中的注释是文件自带的，从中也可以可以看到官方也建议我们这样去做。此外，还有一个drawable-v21的目录下也有同样名称的文件，我们需要一起修改它。这是为设备兼容使用的。这部分内容是我总结的，大家也可以参考Flutter官方的开发文档，比我写的详细，不过官方给的demo和文档不一致，还是以文档为准。

经验分享

大家已经看到了，这种模板式的开发确实方便，不过也有一些缺点：无法控制运行时间，因为这个启动页直到第一帧Flutter画面出来时才消失，而且这个时间与手机性
能有关。此外，还有有一个三方包比较方便，不过从包提供的报告说部分没有google launch的手机上会无法显示闪屏页面，鉴于国内手机的各种UI，所以我没有去使
用这个包。最后，我对添加启动页的方法做一个总结：