Flutter Android项目启动白屏问题

白屏现象

首先,我们使用Android Studio创建一个Flutter项目。运行项目,我们先会看到先闪过一个白屏,然后再进入计数器页面。

那么问题来了,为什么是白屏,而不是黑屏或者其他颜色呢?

我们打开android项目,打开AndroidManifest.xml可以看到配置启动的主题@style/LaunchTheme,点击打开styles.xml

xml 复制代码
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is off -->
    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             the Flutter engine draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
</resources>

点击@drawable/launch_background打开launch_background.xml,可以看到设置的背景为white。

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/launch_image" />
    </item> -->
</layer-list>

解决方式

我们以京东APP为例,通过解压后,找到启动图uh.9.png,该图不能直接使用,将图片拖入绘图后保存使用。

可以看到图片尺寸为718*1278,我们在res目录下创建drawable-xhdpi文件夹

使用layer-list

使用截图软件,截取启动图中间图片和底部的图片放入drawable-xhdpi,吸取背景颜色#FA2B18

修改launch_background.xml

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>
        <shape>
            <solid android:color="#FA2B18" />
        </shape>
    </item>
​
    <item android:bottom="100dp">
        <bitmap
            android:gravity="center"
            android:src="@drawable/center" />
    </item>
​
    <item android:bottom="30dp">
        <bitmap
            android:gravity="bottom"
            android:src="@drawable/bottom" />
    </item>
​
</layer-list>

效果

使用.9图

将完整图launch_image.png片放入drawable-xhdpi,点击右键,弹窗选择Create 9-Path file,创建launch_image.9.png,然后删除旧的图片,只保留.9图。

绘制原则

  1. 上边左右各绘制1px,距离边缘至少1px
  2. 左边上下绘制200px,距离边缘至少1px(取200px的原因:当屏幕显示导航栏时,图片显示的高度变小,可以上下减小图片高度,防止变形)

直接修改styles.xml主题中的背景使用.9图

xml 复制代码
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is off -->
    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             the Flutter engine draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_image</item>
    </style>
</resources>

效果

相关推荐
火柴就是我4 小时前
flutter 之真手势冲突处理
android·flutter
Speed1234 小时前
`mockito` 的核心“打桩”规则
flutter·dart
法的空间4 小时前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios
恋猫de小郭5 小时前
Android 将强制应用使用主题图标,你怎么看?
android·前端·flutter
玲珑Felone5 小时前
从flutter源码看其渲染机制
android·flutter
ALLIN1 天前
Flutter 三种方式实现页面切换后保持原页面状态
flutter
Dabei1 天前
Flutter 国际化
flutter
Dabei1 天前
Flutter MQTT 通信文档
flutter
Dabei1 天前
Flutter 中实现 TCP 通信
flutter
孤鸿玉1 天前
ios flutter_echarts 不在当前屏幕 白屏修复
flutter