Hello伯病，好久不見呀。最近對 Flutter 比較感興趣明场，一直都在在看 Flutter 相關(guān)的內(nèi)容汽摹。
準(zhǔn)備簡單的做一個(gè) Flutter 的項(xiàng)目，也是好久沒有更新博客了苦锨，正好結(jié)合里面啟動(dòng)頁相關(guān)的內(nèi)容寫一篇博客逼泣。
前言
啟動(dòng)頁面（Splash）對于一個(gè) APP 來說還是挺重要的，不設(shè)置啟動(dòng)頁面打開 APP（特別是冷啟動(dòng)）時(shí)會(huì)有很長時(shí)間的白屏效果舟舒，這個(gè)對于用戶體驗(yàn)來說拉庶，非常不友好。
OKay秃励，下面開始進(jìn)入啟動(dòng)頁面的撰寫氏仗。
Flutter 頁面
資源引入
首先將啟動(dòng)頁面的圖片加入到項(xiàng)目目錄：assets/images/splash.png，這里支持多分辨率圖片夺鲜，比如有 @3x 的圖片可以放進(jìn) assets/images/3.0x/splash.png皆尔。這里的 @3x 和 IOS 是一樣的。
注：IOS @3x 渲染后的分辨率為 1080x1920币励，等于 Android 的 xxhdpi
然后在 pubspec.yaml 文件中引入資源：
flutter:
assets:
- assets/images/splash.png
頁面創(chuàng)建
啟動(dòng)頁面首先也是一個(gè)頁面慷蠕，命名為 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 全屏的方式有兩個(gè)選擇：
-
BoxFit.fill
以（上下左右）拉伸的方式充滿屏幕仅胞，不裁剪原圖每辟；
對應(yīng) IOS Content Mode：Scale to fill；
對應(yīng) Android xml 標(biāo)簽<bitmap>內(nèi)屬性 gravity：fill干旧。 -
BoxFit.cover
以裁剪的方式充滿屏幕
對應(yīng) IOS Content Mode：Aspect fill影兽。
考慮到 Android 啟動(dòng)頁面設(shè)置的全屏模式，這里選擇 BoxFit.fill莱革。
完成后運(yùn)行程序會(huì)發(fā)現(xiàn)還是會(huì)有短暫的白屏?xí)r間峻堰，這是因?yàn)槌绦騿?dòng)時(shí)加載所致。現(xiàn)在就需要我們在原生項(xiàng)目中添加啟動(dòng)頁面背景盅视。
Android 啟動(dòng)背景
將 splash.png 按分辨率添加到對應(yīng)的目錄 mipmap-xhdpi/mipmap-xxhdpi/mipmap-xxxhdpi捐名。
mipmap-xxhdpi 對應(yīng)的分辨率是 1080x1920。
然后打開項(xiàng)目的 ./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 其實(shí)就是將多個(gè) drawable 按照順序?qū)盈B在一起顯示镶蹋，在最前面的比如上面被注釋掉的
<item android:drawable="@color/blue" />
會(huì)顯示在最底層，成為背景。這里我們只想設(shè)置圖片贺归，直接注釋掉淆两。
gravity 為 fill 會(huì)將圖片拉伸充滿屏幕，和我們之后出現(xiàn)的頁面 splash_page.dart 里面的圖片 fit: BoxFit.fill 保持一致拂酣。
此時(shí) Android 程序啟動(dòng)時(shí)就沒有白屏了秋冰。
IOS 啟動(dòng)背景
使用 xcode 打開項(xiàng)目的
ios目錄。-
拖拽圖片進(jìn) xcode 項(xiàng)目打開界面左側(cè)
Runner根目錄婶熬。勾選
Copy items if needed剑勾，選中Create groups并在下方勾選Runner。如圖：
image -
完成后在左側(cè)
Project navigator打開文件Runner/Runner/LaunchScreen.storyboard赵颅。然后在中間部分點(diǎn)開
view tree虽另，找到LaunchImage。 如圖：LaunchImage點(diǎn)擊后查看右側(cè)
Attributes inspector饺谬，在image一欄中填寫splash.png捂刺，并將Content Mode修改為Scale To Fill：splash-view-tree -
選中圖片，然后在左側(cè)
View Controller scence中選中并剪切該圖片splash.png并粘貼募寨，以清除十字線（約束）族展。編輯圖片的約束，使其充滿全屏幕绪商。
點(diǎn)擊屏幕右下角的約束編輯器：
splash-masonry將上面填空處都填 0苛谷，然后點(diǎn)擊
Add 4 Constraints辅鲸。 現(xiàn)在運(yùn)行 Flutter 項(xiàng)目到 IOS 設(shè)備可以發(fā)現(xiàn)啟動(dòng)時(shí)的白屏已經(jīng)沒有了格郁。
效果
最后附下實(shí)際效果：
