Flutter 开发 Android & IOS 启动页 splash page

朱雀 2021-06-07 01:57 955阅读 0赞

# Flutter 开发 Android & IOS 启动页 splash page

Hello，好久不见呀。最近对 [Flutter](https://flutter.dev/) 比较感兴趣，一直都在在看 [Flutter](https://flutter.dev/) 相关的内容。

准备简单的做一个 Flutter 的项目，也是好久没有更新博客了，正好结合里面启动页相关的内容写一篇博客。

![Flutter](/images/20210607/1623031100573.png)

### 前言

启动页面（Splash）对于一个 APP 来说还是挺重要的，不设置启动页面打开 APP（特别是冷启动）时会有很长时间的白屏效果，这个对于用户体验来说，非常不友好。

OKay，下面开始进入启动页面的撰写。

### Flutter 页面

#### 资源引入

首先将启动页面的图片加入到项目目录：`assets/images/splash.png`，这里支持多分辨率图片，比如有 `@3x` 的图片可以放进 `assets/images/3.0x/splash.png`。这里的 `@3x` 和 IOS 是一样的。

*注：IOS @3x 渲染后的分辨率为 `1080x1920`，等于 Android 的 xxhdpi*

![资源文件](/images/20210607/1623031059445.png)

然后在 `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"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<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`。

如图：

![img](/images/20210607/1623031026845.png)