前言

啟動(dòng)頁(yè)(Splash)的設(shè)置對(duì)于一個(gè)app來(lái)說(shuō)至關(guān)重要，不設(shè)置啟動(dòng)頁(yè)打開(kāi)app會(huì)有一段時(shí)間的白屏效果，站在用戶體驗(yàn)上來(lái)說(shuō)，不太友好。

設(shè)置啟動(dòng)頁(yè)的方式分為兩種，一種是手?jǐn)]一個(gè)加載頁(yè)面，第二種是直接修改配置文件。具體用哪種方式看個(gè)人使用場(chǎng)景，如果只是為了解決app啟動(dòng)出現(xiàn)白屏問(wèn)題的話，個(gè)人推薦第二種，比較簡(jiǎn)單省事，本文介紹第二種方式。

1、Android啟動(dòng)頁(yè)

• 1.1、android\app\src\main\res\drawable\launch_background.xml

<item>
        <bitmap
            android:gravity="fill" // 這句是全屏顯示的關(guān)鍵
            android:src="@mipmap/itest_splash" /> <!-- 啟動(dòng)圖按照分辨率放在mipmap-**hdpi目錄中 -->
    </item>

• 1.2、android\app\src\main\res\values\styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Theme applied to the Android Window while the process is starting -->
    <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:navigationBarColor">@android:color/transparent</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:windowFullscreen">true</item>
        // 以上三行是新增的
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.
         
         This Theme is only used starting with V2 of Flutter's Android embedding. -->
    <style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <item name="android:windowBackground">@android:color/white</item>
    </style>
</resources>

2、IOS啟動(dòng)頁(yè)

• 2.1、ios\Runner\Assets.xcassets\LaunchImage.imageset

  
  
  IOS

這里順便推薦一個(gè)在線生成啟動(dòng)圖和icon的網(wǎng)站：圖標(biāo)工場(chǎng)，上傳圖片就可以生成各種尺寸（ios&android）的icon。IOS啟動(dòng)頁(yè)需要不同尺寸的圖片，把圖片拷貝到上面的兩個(gè)目錄中，并且修改Contents.json文件，如果用圖標(biāo)工場(chǎng)生成圖片的話，可直接替換上面的兩個(gè)文件夾。