前言
近來閑暇時(shí)間一直在做Flutter,閃屏頁是一個(gè)比較常見的需求,網(wǎng)上的閃屏頁教程大部分是那種類似于廣告頁,而非iOS中的 LaunchScreen 性質(zhì)的閃屏頁.按照原來的方案我們要配置閃屏頁的話,我們需要同時(shí)配置兩端的閃屏頁,那么有沒有比較簡單的方案來配置閃屏頁呢? 毋庸置疑,當(dāng)然是有了,那就是Flutter的插件 - flutter_native_splash . 接下來我們就來看一下具體應(yīng)該怎么使用這個(gè)插件.
使用
首先把 flutter_native_splash 導(dǎo)入到工程的pubspec.yaml中.這里需要注意的是需要放在 dev_dependencies 下,而不是 dependencies.具體如下所示.
dependencies:
....
dev_dependencies:
flutter_native_splash: ^0.3.0 # 生成閃屏頁
接下來我們就來配置flutter_native_splash,在配置之前我們看一下 flutter_native_splash 的可配置項(xiàng).
| 配置項(xiàng) | 說明 |
|---|---|
| color | 用來設(shè)置閃屏頁的背景顏色 |
| image | 設(shè)置閃屏頁的默認(rèn)態(tài)logo或背景圖片路徑 |
| color_dark | 設(shè)置黑夜模式下的閃屏頁背景顏色 |
| image_dark | 設(shè)置閃屏頁的黑夜模式logo或背景圖片路徑 |
| android | 是否生成android的閃屏頁 值為true/false |
| ios | 是否生成iOS的閃屏頁 值為true/false |
| web | 是否生成web網(wǎng)頁的閃屏頁 值為true/false |
| android_gravity | image/image_dark在android閃屏頁中的位置,值有 bottom, center, center_horizontal, center_vertical, clip_horizontal, clip_vertical, end, fill, fill_horizontal, fill_vertical, left, right, start, top |
| ios_content_mode | image/image_dark在iOS閃屏頁中的位置,值有 scaleToFill, scaleAspectFit, scaleAspectFill, center, top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight |
| web_image_mode | image/image_dark在web頁屏幕中的位置,值有 center, contain, stretch, cover |
| fullscreen | image/image_dark是否是全屏模式 值為true/false |
例如,我現(xiàn)在只有一個(gè)logo圖片,那么我想生成iOS和android兩端的閃屏頁,這時(shí)候我只需在pubspec.yaml 如下設(shè)置即可.
flutter_native_splash:
color: "#FFFFFF"
image: "resource/image/common/common_app_splash_icon_400.png"
ardroid: true
ios: true
當(dāng)然了,如果你有其他配置可以自行進(jìn)行添加.
配置完成了,我們該如何生成呢?這時(shí)候需要我們打開終端 cd 到我們的工程目錄下.如果是Android Studio 或者 VSCode 默認(rèn)就是在當(dāng)前工程目錄下.
cd '工程目錄文件'
然后我們需要執(zhí)行下面的三個(gè)命令來生成閃屏頁
flutter clean
flutter pub get
flutter pub run flutter_native_splash:create
每一次都敲三個(gè)命令實(shí)屬麻煩,我們把上訴的三個(gè)命令整合成一個(gè)命令,如下所示.
flutter clean && flutter pub get && flutter pub run flutter_native_splash:create
那么,我們不想使用該插件生成的閃屏頁該怎么辦呢?我們只需要執(zhí)行下面命令即可.
flutter pub run flutter_native_splash:remove
注:每一次更換圖片都是需要重新執(zhí)行命令重新生成.
結(jié)語
OK,上面就是關(guān)于 flutter_native_splash 的使用全部內(nèi)容,其實(shí)比較簡單,如果需要定制化的,建議還是各自平臺配置各自的閃屏頁.如果有任何問題歡迎在評論區(qū)批評指導(dǎo),感謝大家了.
