Flutter淘寶App新增啟動圖最簡單實現方法

GanZhiXiong發表於2019-06-01

不說複雜的,就談你可能會遇到的問題
本人文字和表達水平一般,所以可能打錯字或寫錯,還請見諒

Flutter是移動跨平臺的UI框架,一份程式碼即可在Android和iOS上一致的體驗,但是有一些還是需要我們去修改iOS和Android程式碼才能實現的,比如今天要說的啟動圖!

Flutter預設是沒有啟動圖的,所以開啟App是閃現的介面就是一個白屏,一個體驗好的App肯定是需要啟動圖的。

目前使用Flutter開發的應該大部分是iOS或Android的開發者,要麼會Android,要麼會iOS,對於涉及修改啟動圖,可能就有點一臉懵逼了。這篇文章我會教大家給App新增啟動圖最簡單的方法,相信會給你帶來幫助!

完整示例請看 GitHub:Flutter 淘寶App

一、iOS啟動圖設定

1、新增啟動圖

首先我們開啟工程
找到Assets.xcassets這個檔案
開啟後點選+
再點選New Image Set
給圖片命名 然後分別新增@2x、@3x圖片

@1x圖片就不需要了,在iPhone 3GS上才需要

Flutter淘寶App新增啟動圖最簡單實現方法

2、設定啟動圖

Xcode已經給我們預設生成了LaunScreen.storyboard,通過這個檔案我們就可以修改啟動圖了。
步驟如下圖所以,再次執行,你會發現啟動圖不再是白屏了。

注意要修改圖片的Content Mode為Scale To Fill

Flutter淘寶App新增啟動圖最簡單實現方法

二、Android啟動圖設定

1、新增啟動圖

開啟res目錄,路徑為android/app/src/main/res
將你的啟動圖依次新增到mipmap目錄中

圖片的尺寸可以都一樣

Flutter淘寶App新增啟動圖最簡單實現方法

設定啟動圖

開啟res目錄下drawable目錄
開啟launch_background.xml檔案
新增如下程式碼

//這樣寫可以通過圖片鋪滿整個螢幕,不同螢幕可能會有拉伸
<item android:drawable="@mipmap/launch_image"></item>
複製程式碼

Flutter淘寶App新增啟動圖最簡單實現方法

相關文章