Flutter 開發 Android & IOS 啓動頁 splash page

Hello，很久不見呀。最近對 Flutter 比較感興趣，一直都在在看 Flutter 相關的內容。

準備簡單的作一個 Flutter 的項目，也是很久沒有更新博客了，正好結合裏面啓動頁相關的內容寫一篇博客。

前言

啓動頁面（Splash）對於一個 APP 來講仍是挺重要的，不設置啓動頁面打開 APP（特別是冷啓動）時會有很長時間的白屏效果，這個對於用戶體驗來講，很是不友好。

OKay，下面開始進入啓動頁面的撰寫。

Flutter 頁面

資源引入

首先將啓動頁面的圖片加入到項目目錄：assets/images/splash.png，這裏支持多分辨率圖片，好比有 @3x 的圖片能夠放進 assets/images/3.0x/splash.png。這裏的 @3x 和 IOS 是同樣的。

注：IOS @3x 渲染後的分辨率爲 1080x1920，等於 Android 的 xxhdpi

而後在 pubspec.yaml 文件中引入資源：

flutter:
 assets:
 - assets/images/splash.png
複製代碼

頁面建立

啓動頁面首先也是一個頁面，命名爲 splash_page.dart。

import 'package:flutter/material.dart';

class SplashPage extends StatefulWidget {
  SplashPage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  State<StatefulWidget> createState() {
    return _SplashPageState();
  }
}

class _SplashPageState extends State<SplashPage> {
  
  @override
  void initState() {
    // TODO: do something to init
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Builder(builder: (context) {
      return Container(
        child: Image(image: AssetImage('assets/images/splash.png'), fit: BoxFit.fill,),
      );
    });
  }
}
複製代碼

代碼很簡單，就是一張圖片，而後全屏填充。這裏 fit 全屏的方式有兩個選擇：

• BoxFit.fill 以（上下左右）拉伸的方式充滿屏幕，不裁剪原圖； 對應 IOS Content Mode：Scale to fill； 對應 Android xml 標籤 <bitmap> 內屬性 gravity：fill。
• BoxFit.cover 以裁剪的方式充滿屏幕 對應 IOS Content Mode：Aspect fill。

考慮到 Android 啓動頁面設置的全屏模式，這裏選擇 BoxFit.fill。

完成後運行程序會發現仍是會有短暫的白屏時間，這是由於程序啓動時加載所致。如今就須要咱們在原生項目中添加啓動頁面背景。

Android 啓動背景

將 splash.png 按分辨率添加到對應的目錄 mipmap-xhdpi/mipmap-xxhdpi/mipmap-xxxhdpi。 mipmap-xxhdpi 對應的分辨率是 1080x1920。

而後打開項目的 ./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="@color/blue" />-->

    <!-- You can insert your own image assets here -->
    <item>
        <bitmap android:gravity="fill" android:mipMap="true" android:src="@mipmap/splash"/>
    </item>
</layer-list>
複製代碼

---

layer-list 其實就是將多個 drawable 按照順序層疊在一塊兒顯示，在最前面的好比上面被註釋掉的

<item android:drawable="@color/blue" />
複製代碼

會顯示在最底層，成爲背景。這裏咱們只想設置圖片，直接註釋掉。

gravity 爲 fill 會將圖片拉伸充滿屏幕，和咱們以後出現的頁面 splash_page.dart 裏面的圖片 fit: BoxFit.fill 保持一致。

此時 Android 程序啓動時就沒有白屏了。

IOS 啓動背景

1. 使用 xcode 打開項目的 ios 目錄。

2. 拖拽圖片進 xcode 項目打開界面左側 Runner 根目錄。

   勾選 Copy items if needed，選中 Create groups 並在下方勾選 Runner。

   如圖：

3. 完成後在左側 Project navigator 打開文件 Runner/Runner/LaunchScreen.storyboard。

   而後在中間部分點開 view tree，找到 LaunchImage。 如圖：

   點擊後查看右側 Attributes inspector，在 image 一欄中填寫 splash.png，並將 Content Mode 修改成 Scale To Fill：

4. 選中圖片，而後在左側 View Controller scence 中選中並剪切該圖片 splash.png 並粘貼，以清除十字線（約束）。

   編輯圖片的約束，使其充滿全屏幕。

   點擊屏幕右下角的約束編輯器：

   將上面填空處都填 0，而後點擊 Add 4 Constraints。

5. 如今運行 Flutter 項目到 IOS 設備能夠發現啓動時的白屏已經沒有了。

效果

最後附下實際效果：