解决启动白屏或黑屏
出现此情况的原因有两种
-
FlutterView显示第一帧之前,安卓会加载flutter的SDK,将dart代码加载在内存中,过程中android没有可以显示的东西,出现白屏。(android 方面原因)
初始化过程.png
解决:
找到 \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/launch_image" />
</item> -->
<!--@drawable/launch_screen就是图片路径 可以在当前同文件夹下 放置要显示的图片-->
<item>
<bitmap
android:gravity="center"
android:src="@drawable/launch_screen" />
</item>
</layer-list>
或者根据不同手机的分辨率 在mipmap下放置图片例如:
转载.png
之后前往 styles.xml 文件设置启动页
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
<!-- Show a splash screen on the activity. Automatically removed when
Flutter draws its first frame -->
<!-- 是否全屏显示-->
<!-- <item name="android:windowFullscreen">true</item>-->
<!-- 设置启动背景 引入启动页 xml-->
<item name="android:windowBackground">@drawable/launch_background</item>
<!-- 启动时状态栏状态是否透明-->
<item name="android:windowIsTranslucent">true</item>
</style>
</resources>
重新打包就可以看到 刚刚设置的启动页了
效果例如:
[图片上传失败...(image-7e5c2-1586668143446)]
- 从现象观察,启动页中间有一段时间黑屏,这个为什么呢?前面我们说过,Flutter的启动流程分成两部分,一部分是Android启动阶段,一个是Flutter的启动阶段,这个黑屏就是Flutter的启动阶段没有启动页所造成的。我们从源码入手,详细分析一下,下面是FlutterActivityDelegate的部分源码。参考链接
解决:找到 \app\src\main\AndroidManifest.xml 文件
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.flutterxc">
<!-- io.flutter.app.FlutterApplication is an android.app.Application that
calls FlutterMain.startInitialization(this); in its onCreate method.
In most cases you can leave this as-is, but you if you want to provide
additional functionality it is fine to subclass or reimplement-->
<application
android:usesCleartextTraffic="true"
android:name="io.flutter.app.FlutterApplication"
android:label="flutterxc" //自定义app名称
android:icon="@mipmap/xc_logo" //自定义app logo
>
<activity
android:name=".MainActivity"
android:launchMode="singleTop"
android:theme="@style/LaunchTheme"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize">
// 添加这两段代码 可解决 黑屏问题(出现红线 或者 异常没关系,可以编译成功)
+ <meta-data
+ android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
+ android:value="true" />
// 将资源指向我们的启动页路径
+ <meta-data
+ android:name="io.flutter.embedding.android.SplashScreenDrawable"
+ android:resource="@drawable/launch_background" />
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
<!-- Don't delete the meta-data below.
This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
<meta-data
android:name="flutterEmbedding"
android:value="2" />
</application>
</manifest>
至此可以流畅的打开启动页了