Flutter 首屏优化

Android App 一般在启动的时候会出现白屏、黑屏,持续 0.5s - 3s (看 App 启动加载复杂度 与 手机性能)。

其主要的原因是默认的 Andraid App 是没有设置启动图的。在启动的时候,Andraid App 需要加载各种资源,包括创建 Activity 等。

如果第一个Activity,还没创建完成,就会看到白屏、黑屏,一般解决这个问题就是为 Andraid App 设置一个启动图。就像淘宝 App 那样,启动的时候会看到一张关于淘宝的图片。

而 iOS App 默认设置了启动图,就不会像 Android App 那样出现白屏、黑屏。

在打开 Flutter App 时会出现短暂的白屏现象(Android),这并不是 Flutter 的特例,在 React Native 上同样如此。因此在 React Native 上解决白屏的处理方式与 Flutter 类似。

添加启动图

在 xml 里,添加启动图。当 App 打开时会先看到启动图,接着渲染 Flutter 所管理的 Activity。

首先在 android/app/src/main/res/drawable-hdpi 里加上一个图片作为程序启动图(名称随意,例如:bg.png),然后修改 android/app/src/main/res/values/styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- 这里将刚刚那张图片设置为背景图片, bg对应图片名称 -->
    <item name="android:windowBackground">@drawable/bg</item>
</style>

或者,在 android\app\src\main\res\drawable\launch_background.xml 里添加,也行。

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white" />

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

最后,记得在 Flutter 底端页面上设置背景为非透明。

@override
Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
            title: new Text('应用'),
        ),
        body: new Container(
            color: Colors.white,
        ),
    );
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • mean to add the formatted="false" attribute?.[ 46% 47325/...
    ProZoom阅读 2,724评论 0 3
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,523评论 0 17
  • 转载请注明出处(https://www.jianshu.com/p/5f538820e370),您的打赏是小编继续...
    福later阅读 28,096评论 8 73
  • 滚滚长江东流水,朗朗乾坤西斜阳。 无他无我娇子心,一心一意脱风尘。 朝晚劳作未有时,不敢忘却山河美。 余念不消养蚕...
    有毒和无邪阅读 334评论 0 0
  • 喉轮wahe guru的奎亚第2天/总第522天(20180106):有了之前上现场课的经验,今天对体式并没有纠结...
    长腿蟹1979阅读 333评论 0 0